max-width: 100% + height: auto 失效的根本原因是父容器无明确宽度、内联宽高属性覆盖或 flex/grid 中 min-width: auto 阻止收缩；需同时满足三条件：父容器有可计算宽度、清除内联属性、在图片或其父项上设 min-width: 0。
img 元素默认不随容器缩放，直接写 width: 100% 或 max-width: 100% 常常失效——不是 CSS 写错了，而是浏览器在特定上下文中会忽略它。
为什么 max-width: 100% + height: auto 有时不生效
这组样式本身正确，但依赖三个隐性条件同时满足：
- 父容器必须有可计算的宽度（比如
width: 100%、max-width: 800px，或 flex/grid 轨道明确分配了空间） -
<img>标签不能带内联width和height属性——它们会覆盖height: auto，导致高度锁死 - 若父容器是
display: flex或display: grid，子项默认有min-width: auto，它会阻止图片收缩，哪怕写了max-width: 100%
img 在 Flex/Grid 容器里撑开布局怎么办
这不是 bug，是浏览器对替换元素的默认行为：图片“扛着原始尺寸”拒绝压缩。解法不在图片上堆属性，而在释放它的收缩权限：
- 给
<img>加min-width: 0—— 这是最直接、最通用的修复，覆盖 flex 默认的min-width: auto - 避免依赖
flex-shrink: 1：对替换元素效果极不稳定，尤其在 Safari 中可能完全无效 - 如果图片外层是个
<div class="card">，且该 <code>div是 flex 子项，min-width: 0也得加在那个div上，而不是只加在img上固定尺寸容器里怎么让任意比例图填满且不失真
当容器宽高都固定（如头像框
width: 80px; height: 80px;），仅靠width: 100%无法处理横图、竖图混用问题：- 必须配合
object-fit: cover（裁剪填满）或object-fit: contain（等比留白） -
object-fit只在容器有显式width和height（或aspect-ratio）时才生效，缺一不可 - iOS Safari ≤ 14.5 需加
-webkit-object-fit: cover；IE 完全不支持，fallback 只能改用background-image，但会丢失alt和 SEO
响应式图片光靠 CSS 缩放远远不够
视觉上看着“自适应”了，不代表加载合理。小屏手机加载 2MB 的桌面图，用户还在等白屏，你却只调了 CSS：
-
srcset列的是源图固有宽度（单位是w），例如"small.jpg 480w, large.jpg 1200w" -
sizes必须和 CSS 中该图片容器的**实际显示宽度逻辑一致**，例如sizes="(max-width: 768px) 100vw, 50vw"—— 写错一个单位（比如写成50%），srcset就形同虚设 - 漏掉
sizes，浏览器只能按默认规则选图，大概率选大不选小
真正容易被忽略的不是写法本身，而是父容器的
min-width行为（尤其在 flex 中）和sizes与布局逻辑是否严格匹配——这两处一错，图片就既不缩、又不省流量。 - 必须配合
