最稳写法是max-width: 100%和height: auto必须同时使用，确保图片等比缩放、不拉伸、不溢出；失效主因是父容器无宽度、内联宽高属性覆盖或flex/grid中min-width: auto限制。
max-width: 100% + height: auto 能解决绝大多数图片自适应问题，但只要父容器没宽度、用了 Flex/Grid、或图片带内联 width/height，它就会失效——这不是代码写错了，是浏览器计算逻辑卡在了你没注意到的地方。
为什么 max-width: 100% + height: auto 有时不生效
这组样式本身没问题，但它依赖三个隐性前提：父容器得有可计算的宽度、图片不能被内联属性锁死、布局上下文不能干扰缩放行为。
- 父容器没设
width、max-width或flex/grid轨道约束时，100%就没参照对象——比如一个空<div> 默认是 <code>display: block但宽度为auto，此时图片按原始尺寸渲染 -
<img style="max-width:90%" style="max-width:90%">这类内联属性会直接覆盖height: auto，高度永远卡在 400px - 在
display: flex容器里，子项默认有min-width: auto，它会阻止图片收缩，哪怕写了max-width: 100%也无效 - 用开发者工具看 computed 样式，常会发现某条全局 CSS（如 Bootstrap）设置了
max-width: none，把你的规则顶掉了 - 父容器只设了
width: 100%或max-width，但height是auto或未声明 → 浏览器算不出“要填多大的框”，object-fit直接跳过 - 图片本身带
width和heightHTML 属性（如<img style="max-width:90%" style="max-width:90%">），这些会转成内联样式，可能覆盖你写的width: 100%;height: 200px - 用了
height: auto或max-height→ 这些都不是“确定高度”，object-fit需要参与计算的实际像素值或aspect-ratio - 现代写法推荐用
aspect-ratio: 16 / 9替代固定height，更简洁且响应式友好 - 给
<img>加min-width: 0是最通用、最稳定的解法——它覆盖 flex 默认的min-width: auto，允许图片随容器变窄而收缩 - 别依赖
flex-shrink: 1，对替换元素效果极不稳定；align-self: center可辅助垂直居中，但不解决撑开问题 - 如果父容器是 Grid 子项，检查
grid-template-columns是否用了minmax(300px, 1fr)这类写法——最小宽度锁死了，图片缩不下去 - 容器本身若需等比占位（如 16:9），优先用
aspect-ratio: 16 / 9，比padding-top百分比更简洁可靠 -
srcset列的是源图固有宽度，单位是w（如"small.jpg 480w"） -
sizes必须和 CSS 中该图片容器的**实际显示宽度逻辑一致**，否则浏览器选错源 - 常见错误：只写
srcset不配sizes，浏览器只能按默认规则（通常是视口宽度）选图，结果往往偏大 - 不写
sizes时浏览器默认按100vw估算，小屏也容易载入大图；WebP 格式可进一步压缩体积
object-fit: cover 没效果，大概率是容器没尺寸
object-fit 不是“让图片自适应”，而是“让图片在已知尺寸的盒子里怎么填”——没设宽高，它压根不干活。
Flex/Grid 中图片撑开容器？关键是重置 min-width
图片在 Flex/Grid 里“扛着原始尺寸”撑大布局，不是 bug，是浏览器对替换元素的默认行为。解法不在图片上动太多，而在控制它的收缩权限。
srcset + sizes 不配对，等于没做响应式
CSS 控制显示尺寸，srcset + sizes 才控制加载哪张图。漏掉后者，高清屏上图片发虚，小屏却加载 2MB 大图。
真正容易被忽略的是：object-fit 和 srcset 解决的是不同层面的问题——前者管“怎么塞进框里”，后者管“载哪张图”。混用时若容器尺寸靠 JS 动态计算，sizes 的值就容易失准；而所有这些，都依赖父容器有明确的宽高约束，而不是靠 position: absolute 或固定像素偏移硬推位置。
