直接写 img { max-width: 100%; height: auto; } 大概率生效，但失效主因是父容器无宽度参照、内联宽高属性覆盖、flex/grid 中 min-width: auto 锁死收缩，或全局样式如 max-width: none 覆盖；需同步确保父容器有明确宽度、清除行内尺寸、对 flex/grid 项设 min-width: 0，并加 display: block 消除基线间隙。
直接写 img { max-width: 100%; height: auto; } 大概率能解决问题，但失效时不是代码错了，而是浏览器在计算“100%”时找不到参照宽度，或被其他样式静默覆盖。
为什么 max-width: 100% 看似写了却不缩放
这组规则依赖父容器提供可计算的宽度上下文。常见卡点：
- 父
<div> 没设 <code>width、max-width或flex-basis，导致“100%”无处可算 -
<img alt="HTML图片无法自适应怎么解决？常见问题排查步骤" >带了内联width="600"或style="max-width:90%"，直接覆盖height: auto - 父容器是
display: flex，子项默认min-width: auto，锁死图片最小宽度（哪怕写了max-width: 100%） - 全局 CSS（如 Bootstrap）设置了
img { max-width: none; }，权重更高，你的规则被顶掉 - 给图片的**父容器（即 flex item 或 grid item）** 加
min-width: 0—— 这是最稳定解法，覆盖默认的min-width: auto - 别只加
flex-shrink: 1到<img alt="HTML图片无法自适应怎么解决？常见问题排查步骤" >，对替换元素效果极差 - 若用
grid-template-columns: minmax(300px, 1fr)，300px 的最小宽度会阻止图片收缩，改用1fr或minmax(0, 1fr) - 确保图片自身有
max-width: 100%; height: auto;，再配align-self: center垂直居中 -
<img alt="HTML图片无法自适应怎么解决？常见问题排查步骤" >显式设display: block（inline-block也可，但需注意基线间隙） - 父容器不能是
display: flex或display: grid，否则接管 margin 行为 - 父容器不能塌陷（computed width 不为 0），比如里面只有浮动子项却没清除
- 图片不能有
width: 100%或max-width: 100%—— 它占满父宽后，“auto” 就没剩余空间可分 - 老版 iOS Safari 需加
-webkit-object-fit: cover;，IE 完全不支持object-fit，fallback 只能用background-image+background-size（但丢alt和 SEO） - 邮件 HTML（如 Outlook）几乎不认
max-width，必须用width行内属性（如<img style="max-width:90%" alt="HTML图片无法自适应怎么解决？常见问题排查步骤" >），再配合style="width: 100%;"做降级 - 表格布局中图片白边，本质是
<td> 默认 <code>padding: 2px，必须显式写padding: 0，border-collapse: collapse不解决这个问题 -
srcset和sizes在开发时务必用 Chrome DevTools → Network → Filter “Large resources” 验证是否真加载了合适尺寸图；漏写sizes会导致手机加载 4K 图等三秒
flex 或 grid 容器里图片撑开布局怎么办
这不是图片的问题，是容器项的收缩权限没放开。关键操作不在 <img alt="HTML图片无法自适应怎么解决？常见问题排查步骤" > 上，而在它的直接父元素上：
图片居中失败，margin: 0 auto 无效的真因
<img alt="HTML图片无法自适应怎么解决？常见问题排查步骤" > 默认是 inline 元素，margin: 0 auto 对它完全不生效。必须同时满足：
立即学习“前端免费学习笔记（深入）”；
老 iOS、IE 或邮件客户端兼容要额外注意什么
现代写法在旧环境里容易静默失效，不是 bug，是特性缺失：
真正难调的从来不是单条 CSS，而是多个隐性前提（父宽、display 类型、min-width、内联属性、框架重置）同时满足——多数“失效”都是其中一环悄悄断开了。
