max-width: 100% + height: auto 并非万能解，因其依赖父容器有可计算宽度、img 无内联宽高、布局上下文允许收缩三个隐性前提；Flex 中需加 min-width: 0 才生效，维持宽高比需 padding-bottom 或 aspect-ratio 配合 object-fit: cover，且后者须容器有明确宽高。
max-width: 100% + height: auto 为什么不是万能解
这组样式能解决大多数图片随容器变窄而缩放的问题，但失效时往往不是代码写错，而是浏览器计算链断在了某个隐性环节。常见现象是：小屏下图片依然溢出、高度塌陷成一条线、或在 Flex 容器里“纹丝不动”。根本原因在于它依赖三个未显式声明的前提：父容器有可计算宽度、img 没被内联 width/height 锁死、布局上下文不阻止收缩。比如一个空 <div> 默认 width 是 auto，此时 <code>100% 就没参照；又比如 <img style="max-width:90%" style="max-width:90%" alt="HTML响应式图片自适应容器比例的底层逻辑与实现" >，内联 height 直接覆盖 height: auto，高度永远卡在 400px。
Flex/Grid 容器中图片撑开布局的真正原因
这不是 bug，是浏览器对替换元素（如 <img alt="HTML响应式图片自适应容器比例的底层逻辑与实现" >）的默认行为：flex 子项默认带 min-width: auto，它会强制图片至少保持原始宽度，哪怕你写了 max-width: 100% 也无效。结果就是图片扛着原始尺寸把整个 flex 容器撑宽。解决方案不在图片上加 flex-shrink: 1（对替换元素效果极差），而是在 <img alt="HTML响应式图片自适应容器比例的底层逻辑与实现" > 上加 min-width: 0——这是最直接、最稳定的解法，它覆盖掉 flex 的默认限制，让图片真正服从 max-width 约束。
容器无固定尺寸时如何维持图片宽高比
当父容器宽高都不确定（比如响应式网格中的卡片），又想让图片始终按 16:9 显示，不能靠给 <img alt="HTML响应式图片自适应容器比例的底层逻辑与实现" > 设 height 或 aspect-ratio（后者不支持所有浏览器）。可行路径只有两条：
• 用 padding-bottom: 56.25% 配合 position: relative + absolute 定位图片，靠 padding 生成等比占位空间
• 直接给父容器设 aspect-ratio: 16/9（现代浏览器支持），再让 <img alt="HTML响应式图片自适应容器比例的底层逻辑与实现" > 填满该容器并加 object-fit: cover
注意：两种方式都要求图片本身不带内联宽高，且 <img alt="HTML响应式图片自适应容器比例的底层逻辑与实现" > 必须设 width: 100%; height: 100%，否则无法填满。
object-fit: cover 在什么条件下才真正生效
object-fit 不是“让图片自适应窗口”，它是“让图片按指定框裁剪填充”。所以它必须配合显式的容器尺寸才起作用——width 和 height 缺一不可。写 .card-img { object-fit: cover; } 而不设父容器宽高，等于没写。另外，老版 iOS Safari（≤12.5）需加 -webkit-object-fit: cover；IE 完全不支持，fallback 只能用 background-image，但会丢失 alt 和 SEO。最容易被忽略的是：别在用了 object-fit 的容器里再写 max-width: 100%，它和固定宽高冲突，可能引发渲染异常。
立即学习“前端免费学习笔记（深入）”；
