max-width: 100% 常无效因依赖父容器有明确宽度、height: auto 防变形、且不能被其他宽高值覆盖；需三者共存，并配合 srcset 解决高清屏模糊。
为什么只写 max-width: 100% 常常不管用
因为这行代码本身没毛病，但它的效果完全依赖上下文：父容器是否真有可计算的宽度？height 是否被其他规则覆盖？图片原始尺寸是否远大于视口？常见失效现象包括——图片仍溢出、底部留白、小图被强行拉大模糊、或在 iOS Safari 里完全不缩放。
关键不是“加了没”，而是“加在哪”和“配什么”。必须同时满足三个条件：max-width: 100%、height: auto、父容器有明确宽度约束。漏掉任一，就可能白写。
- 别给
img单独设width或height具体值（比如width: 300px），会覆盖max-width的响应逻辑 - 如果父容器是
display: flex，记得加flex-shrink: 0，否则图片可能被压缩到 0 宽度 - 用 DevTools 查看 computed
width，确认max-width: 100%的百分比基准是不是你预期的那个父元素
移动端必须配 height: auto，不能省
height: auto 不是锦上添花，是防止变形的底线。没有它，浏览器会按图片原始像素高度渲染，一旦宽度被 max-width 缩小，高度却卡死，结果就是压扁或拉伸。
特别注意：某些 UI 框架（如 Bootstrap）的 .img-fluid 已含这两条，但如果你额外写了 height: 100% 或 object-fit: cover 却没配 height: auto，反而会破坏等比缩放。
立即学习“前端免费学习笔记（深入）”；
-
display: block建议加上，能干掉img默认的行内基线对齐导致的底部空白 - 不要用
width: 100%替代max-width: 100%——前者强制拉伸小图，后者才真正“按需缩放” - 在
position: absolute容器里放图时，height: auto可能失效，此时优先考虑用aspect-ratio控制容器
父容器没宽度，max-width: 100% 就失去参照
这是移动端最隐蔽的坑：max-width: 100% 的“100%”永远参考的是**最近的、有明确宽度的块级祖先**。如果父层用了 display: flex 且没设 width，或外层是 position: relative 但没宽高，那这个“100%”可能算到 body 甚至 viewport 上，导致图片在小屏上依然超宽。
稳妥解法是切断依赖链：
- 直接给
img加max-width: 100vw（注意是vw，不是%），跳过所有父级宽度计算 - 确保图片的直接父容器设置了
width: 100%或max-width: 100%，且不是display: contents或inline类型 - 检查是否有
box-sizing: content-box+padding导致内容区实际可用宽度小于 100%
高清屏下清晰度问题，max-width 解决不了
max-width: 100% 只管布局缩放，不解决像素密度。iPhone 的 DPR=3 时，一张 400px 宽的图会被拉伸到 1200 物理像素宽，必然模糊。这时候必须靠 HTML 层的 srcset 和 sizes 配合。
最简可行组合：
<img src="photo.jpg"
srcset="photo-400w.jpg 400w,
photo-800w.jpg 800w,
photo-1200w.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="示例">
-
srcset提供多个分辨率版本，sizes告诉浏览器“这张图在不同断点下打算占多宽” - 仍要保留
max-width: 100%; height: auto，否则高倍图加载后可能因原始尺寸过大而溢出 - 旧版 Safari（≤ iOS 15.4）不支持
aspect-ratio，若需固定容器比例，得用padding-top百分比 + 绝对定位 fallback
真正难调的从来不是 max-width 这一行，而是它和父容器宽度链、图片原始尺寸、srcset 加载时机之间的隐式耦合。建议先关掉 JS，在纯 CSS 下验证缩放行为，再一层层加功能。
