直接写 img { max-width: 100%; height: auto; } 能解决80%自适应问题，但需满足三个隐性条件：父容器有可计算宽度、图片无内联宽高、布局上下文允许收缩；否则因参照缺失或属性覆盖而失效。
直接写 img { max-width: 100%; height: auto; } 能解决 80% 的自适应问题，但只要父容器没宽度、用了 Flex/Grid、或图片带内联 width/height，它就立刻失效——这不是你 CSS 写错了，是浏览器根本没地方去“算 100%”。
为什么 max-width: 100% 经常不生效
这行样式本身没问题，但它依赖三个隐性条件：父容器得有可计算的宽度、图片不能被内联属性锁死、布局上下文不能阻止收缩。
- 父容器是空
<div> 或只写了 <code>display: flex却没设宽，100%就失去参照对象，图片按原始尺寸渲染 -
<img src="a.jpg" style="max-width:90%" style="max-width:90%" alt="HTML自适应图片代码写法详解" >这类内联尺寸会直接覆盖height: auto，高度永远卡在 400px - 在
display: flex容器里，子项默认min-width: auto，它会扛住图片原始宽度，max-width: 100%彻底被忽略 - 某些 CSS 框架（如 Bootstrap）全局设了
img { max-width: none; }，把你写的规则顶掉了 - 必须同时设置容器的
width和height（或用aspect-ratio: 16/9），否则object-fit完全不工作 -
object-fit: cover适合封面图、头像；object-fit: contain适合产品图、图表这类必须完整显示的场景 - 老版 iOS Safari 需加
-webkit-object-fit前缀；IE 完全不支持，fallback 只能用background-image+background-size，但会丢alt和 SEO - 别在
object-fit容器里再写max-width: 100%，它和固定宽高冲突，可能引发渲染异常 - 给图片的**父容器（Flex/Grid 子项）** 加
min-width: 0，这是最通用、最稳定的解法，覆盖默认的min-width: auto - 别依赖
flex-shrink: 1，对<img alt="HTML自适应图片代码写法详解" >效果极不稳定；align-self: center可辅助垂直居中，但不解决撑开 - 如果父容器是 Grid 子项，检查
grid-template-columns是否用了minmax(300px, 1fr)这类写法——最小宽度锁死了，图片再怎么缩也无济于事 - 在 Flex 容器中，加
flex-shrink: 0仅适用于你确定它不该被压缩的场景（比如图标），不是通用解法 -
srcset列的是图片源的**固有宽度**（单位w），例如"photo-800.jpg 800w"，不是显示宽度 -
sizes必须和 CSS 中该图片所在容器的**实际占位宽度逻辑一致**，比如容器在小屏是100vw，中屏是50vw，就得写sizes="(max-width: 768px) 100vw, 50vw" - 漏掉
sizes，浏览器默认按100vw选图，大概率选大了；写错sizes（比如把50vw写成50%），会导致选图完全失准 - 开发时用 Chrome DevTools 的 Network → Filter → “Large resources” 查看是否真加载了合适尺寸的图
object-fit: cover 为啥加了也没反应
object-fit 不是“让图片变小”，而是“让图片按指定框裁剪填充”。它只在容器有明确尺寸时才触发。
Flex/Grid 里图片撑开容器怎么办
这不是图片的问题，是 Flex/Grid 对替换元素的默认行为——它不让图片收缩。解法不在图片上猛加样式，而在控制它的收缩权限。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
要不要配 srcset 和 sizes
只做视觉缩放，不用；但只要上线，就该用——否则手机加载 4K 图，用户等三秒白屏，你还不知道问题在哪。
真正卡住人的从来不是 height: auto 该不该写，而是你没意识到 max-width: 100% 其实是个“有条件触发”的指令——它需要父容器开口说话，需要布局模式允许收缩，还需要你亲手关掉那些内联属性的干扰开关。
