max-width: 100% 不生效的主因是父容器无宽度、内联宽高覆盖、flex/grid 中 min-width: auto 阻碍缩放；必须配合 height: auto 保持比例，且需检查 srcset/sizes 和 safari 渲染问题。
为什么 max-width: 100% 不生效
常见原因是父容器没设宽度，或图片被强制设置了 width / height 内联样式，覆盖了 css 规则。另外，如果图片在 flex 或 grid 容器中，默认的 min-width: auto 会阻止缩放。
实操建议：
- 检查并移除图片上的内联
width和height属性（尤其是 cms 或编辑器自动插入的） - 给父容器显式设置
width，比如width: 100%或max-width: 100% - 在 flex 容器中加
img { min-width: 0; }，解除 flex 项的最小尺寸限制 - 确保没有更高优先级的选择器（如 ID 或
!important）覆盖了你的响应式规则
height: auto 的必要性
只设 max-width: 100% 而不配 height: auto，会导致图片高度塌陷或比例错乱——浏览器默认把 height 当作固定值处理，缩放时不会等比调整。
正确写法必须成对出现：
立即学习“前端免费学习笔记（深入）”；
img { max-width: 100%; height: auto; }注意点：
-
height: auto不是可选补丁，而是维持宽高比的关键 - 不要用
height: 100%替代，它依赖父元素高度，而父高常为auto，结果是 0 - 若需裁剪或占满容器，应改用
Object-fit，而非强行设死height
遇到 srcset 和 sizes 时怎么办
响应式图片不只是 CSS 问题。如果用了 srcset，但图片仍不缩放，大概率是 html 层面没配合 CSS 规则，或 sizes 值写错了导致浏览器选了过大资源。
检查重点：
- 确保
max-width: 100%+height: auto的 CSS 生效 -
sizes中的宽度描述要匹配实际布局，比如sizes="(max-width: 768px) 100vw, 50vw"，而不是笼统写"100vw" - 避免同时用
width/height属性和srcset，容易触发浏览器的“布局抖动”或忽略响应逻辑
移动端 Safari 图片模糊或卡顿
ios Safari 对缩放图片有渲染优化策略，有时会降质显示，尤其在 transform: scale() 或 zoom 场景下。这不是 CSS 写错了，而是浏览器主动妥协。
缓解方式：
- 优先用
max-width+height: auto，避免任何transform缩放图片 - 添加
img { image-rendering: -webkit-optimize-contrast; }提升清晰度（仅 Safari 有效） - 确保图片本身分辨率不过高（比如 4K 图放在小屏上），否则重采样压力大，易糊
CSS 响应式图片的核心就两条：父容器可缩、图片自身不锁死尺寸。很多人卡在细节——比如忘了清除内联样式，或以为 max-width 单独就能撑起整个响应逻辑。真正起作用的是这一对组合拳，缺一不可。