直接用max-width:100%+height:auto实现安全等比缩放，缺一不可；漏height:auto会导致塌陷或拉伸，父容器无有效宽度则max-width失效，display:block消除inline默认底部空白，高清屏模糊需srcset配合而非仅靠css缩放。
直接用 max-width: 100% + height: auto 就能实现安全等比缩放，但缺一不可，且父容器必须有有效宽度约束。
为什么只写 max-width: 100% 不够
浏览器默认按原始尺寸渲染 <img>，max-width: 100% 只限制宽度上限，不控制高度逻辑。漏掉 height: auto 时，高度可能继承 0、固定值或异常计算值，导致图片塌陷或拉伸变形。
-
width: 100%是常见误用：它强制拉满父宽，小图会被无脑放大、模糊 - 某些 CSS 重置库或框架（如 older Bootstrap）会全局设
img { height: auto !important }，反而干扰你自己的规则 - 行内样式如
style="height: 200px"会直接覆盖height: auto
父容器没宽度，max-width: 100% 就失效
max-width: 100% 的 “100%” 是相对于父容器计算的。如果父元素是空 <div>、未设 <code>width 或在 flex 中未定义主轴尺寸，那这个百分比就失去参照，图片照样溢出。
- 典型场景：文章正文里直接插
<img>，但外层<section></section>没设max-width或width - 移动端 Safari 对无宽容器更敏感，可临时加
width: 100%到父<div> 快速验证 <li>用 DevTools 的 Computed 面板查 <code>max-width最终值——如果是none，说明被覆盖或无基准 -
display: block是最直接、兼容性最好的解法（IE8+ 支持） - 替代方案如
vertical-align: top或父容器设font-size: 0也可行，但需额外上下文控制 - 如果
<img>包在<a></a>里，display: block还能扩展点击区域 - 必须配合
srcset提供多倍图：srcset="photo@1x.jpg 1x, photo@2x.jpg 2x" -
sizes告诉浏览器不同视口下该用多宽的图：sizes="(max-width: 768px) 100vw, 50vw" - 即使用了
srcset，仍要保留max-width: 100%+height: auto，否则高倍图加载后可能因原始尺寸过大而溢出
display: block 不是可选，是实际需要
<img> 默认是 inline 元素，底部会因基线对齐留下几像素空白（descender 空间），尤其在单独一行时明显“往下踢了一脚”。这不是缩放问题，但影响布局一致性。
高清屏模糊不是 CSS 能解决的
max-width: 100% 只缩放 CSS 像素，不提升物理像素密度。Retina 屏（DPR=2/3）加载 1x 图，再缩放也会糊——这是资源问题，不是样式问题。
真正容易被忽略的是嵌套层级中某一层父元素用了 display: inline 或 float，会让宽度计算链断裂——这时候加个 display: block 到 <img> 上，往往比调整个布局更快见效。
