img { max-width: 100%; height: auto; } 不生效的根本原因是它依赖父容器提供明确宽度参照，而常见失效场景包括：父容器无宽度（如仅设 display: flex）、flex 项默认 min-width: auto 锁死原始尺寸、内联 width/height 属性覆盖 css、或 srcset/sizes 未正确配对导致资源加载失当。
img { max-width: 100%; height: auto; } 为什么有时不生效
这行 CSS 看似万能，但实际常失效——不是写错了，而是它依赖父容器提供宽度参照。浏览器计算 max-width: 100% 时，会逐级向上找第一个有明确宽度的祖先元素。
- 父
<div> 只写了 <code>display: flex却没设width或max-width，图片就“找不到 100% 是多少” - Flex 容器里的
<img>默认带min-width: auto，会死守原始尺寸，max-width: 100%被无视 -
<img src="x.jpg" style="max-width:90%" style="max-width:90%">这类内联属性会覆盖height: auto，高度被锁死 - 某些 CSS 框架（如 Bootstrap）全局设了
img { max-width: 100% }，但你又加了style="width: 500px"，导致冲突 - 给图片本身加
min-width: 0不起作用；必须加在它的**父 Flex/Grid 子项**上（比如那个<div class="card">） <li>更稳妥组合是：<code>max-width: 100%; height: auto; min-width: 0;（写在图片上），再配合父项的min-width: 0 - 避免用
flex-shrink: 1强制压缩图片——对替换元素效果不稳定；align-self: center可辅助垂直居中 - Grid 中若列定义用了
minmax(400px, 1fr)，小屏下该列不会收缩，图片自然也缩不了 - 必须显式设置容器的
width和height，例如：.avatar { width: 80px; height: 80px; } -
object-fit: cover：等比缩放后填满，可能裁边——适合头像、封面图；object-fit: contain：等比缩放后完整显示，留白——适合产品图、示意图 - 老版 iOS Safari（≤12.5）不支持原生
object-fit，得加-webkit-object-fit: cover - IE 完全不支持，fallback 方案只能用
background-image+background-size，但会丢失alt和 SEO -
srcset里的w单位是图片源文件的**固有宽度**（如"photo-400.jpg 400w"），不是显示宽度 -
sizes必须和 CSS 中该图片**容器的实际显示宽度逻辑一致**；例如容器在小屏占满视口，sizes就该写"(max-width: 480px) 100vw" - 不写
sizes时浏览器默认按100vw选图，容易误选过大源，尤其在max-width限制容器的情况下 - 单图基础适配可只用
<img src="x.jpg" style="max-width:90%">；上线项目必须补srcset+sizes
Flex 或 Grid 中图片撑开容器怎么办
在 display: flex 或 display: grid 布局里，<img> 天然抗拒收缩，哪怕你写了 max-width: 100%，它也可能把整个卡片或网格项撑宽、撑高。
object-fit: cover 在固定尺寸容器里怎么用才有效
object-fit 不是拿来“让图片自适应窗口”的，它是解决“已知容器宽高、但图片比例不一”时的裁剪/留白问题。没设容器宽高，它直接不工作。
srcset 和 sizes 不配对就等于没做响应式
CSS 缩放只管“怎么画”，srcset 和 sizes 才管“下载哪张”。漏掉后者，手机可能加载 3MB 的 4K 图，高清屏上却糊成马赛克。
真正卡住人的从来不是那行 max-width: 100%，而是父容器有没有宽、Flex 子项有没有 min-width: 0、内联 width/height 删没删、sizes 值和 CSS 容器宽度是否对得上——这些地方一错，图片就立刻失控行为。
