响应式图片必须同时设置 max-width: 100% 和 height: auto 才能正确缩放并保持宽高比；否则因父容器坍缩、内联尺寸属性、flex/grid 默认 min-width 或高优先级样式覆盖等原因导致失效。
max-width: 100% 单独写根本撑不起响应式图片——它只是上限，不是缩放指令。必须配 height: auto，否则浏览器会按原始高度渲染，导致错位、塌陷或比例失真。
为什么max-width: 100%经常不生效
常见现象：图片在小屏下仍溢出容器、高度没变、甚至完全消失。根本原因不是 CSS 写错了，而是上下文被锁死：
- 父容器没设宽度（比如
div默认width: auto，但内部没内容时可能坍缩） -
img标签自带内联width和height属性（CMS、编辑器或旧代码插入的，会直接覆盖 CSS） - 图片在
flex或grid容器中，被默认的min-width: auto拦住缩放 - 更高优先级的选择器（如 ID 或带
!important的规则）悄悄覆盖了你的样式
必须成对使用的最小安全写法
只加 max-width: 100% 是半残操作；height: auto 不是可选项，是维持宽高比的强制条件：
img {
max-width: 100%;
height: auto;
}
注意点：
- 绝不能用
height: 100%替代——它依赖父元素高度，而父高常为auto，结果就是 0 - 如果要裁剪或填满容器，改用
object-fit+ 明确容器尺寸，而不是硬设height - 遇到
srcset时，确保 HTML 中没同时写width/height属性，否则浏览器可能忽略响应逻辑
Flex/Grid 容器里特别容易翻车
现代布局中，flex 项默认 min-width: auto，会阻止图片收缩到小于原始宽度。不加干预，max-width: 100% 就形同虚设：
- 在
flex容器中，给图片加min-width: 0 - 在
grid容器中，检查是否用了grid-template-columns: repeat(4, 1fr)这类固定列数定义——小屏下应切到repeat(auto-fit, minmax(250px, 1fr))) - 避免子元素写死
width: 300px，它会撑破网格轨道，尤其在移动端
移动端 Safari 的隐藏陷阱
iOS Safari 对缩放图片有主动降质策略，不是你 CSS 写得不对，而是它在“优化”：
- 模糊或卡顿通常发生在 transform 缩放或 zoom 场景，优先回归
max-width+height: auto - 加一行
image-rendering: -webkit-optimize-contrast可提升清晰度（仅 Safari 有效） - 别塞一张 4K 图进小屏容器——重采样压力大，易糊，该压缩就压缩
最常被跳过的动作是：删掉图片上的内联 width 和 height，以及确认父容器有没有显式宽度。这两步一漏，后面所有 CSS 都在给空气调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
