max-width: 100%能防止图片撑破容器，因其作为替换元素有固有尺寸，该声明设宽度上限并配合height: auto保持宽高比，避免拉伸或溢出。
为什么max-width: 100%能防止图片撑破容器
因为img是替换元素，默认有固有宽高，浏览器不会自动按容器缩放；max-width: 100%强制它“最多占满父容器宽度”，超出部分被截断或压缩，而height: auto保留宽高比，避免拉伸变形。
常见错误现象：img在小屏幕里横向溢出、触发页面横向滚动条；或者加了width: 100%但高度塌陷成一条线（没写height: auto）。
-
max-width: 100%是安全上限，不强制拉伸，原图小就保持原大小 - 必须配
height: auto，否则高度默认为auto但受其他规则干扰（比如父元素height设死）会失效 - 不要写
width: 100%——它会强制拉伸，破坏比例；max-width才是响应式缩放的正确起点
哪些场景下max-width: 100%会失效
不是所有容器都支持这个规则生效。关键看父容器有没有明确的宽度约束，以及是否触发BFC或flex/grid布局的特殊行为。
使用场景举例：文章正文<article></article>里插入图片、卡片组件中的头图、响应式表单里的上传预览图。
- 父容器是
display: flex且没设flex-shrink: 1时，图片可能拒绝缩小——加flex-shrink: 1或min-width: 0 - 父容器
width为fit-content或max-content时，max-width: 100%参照的是内容宽度，不是视口——改用width: 100vw或媒体查询兜底 - 图片在
position: absolute容器中，脱离文档流后max-width: 100%参照的是最近定位祖先，不是直接父级
height: auto不够用？这些参数要一起配
height: auto只在宽高比自然存在时才可靠。一旦图片加载失败、尺寸未声明、或CSS重置影响了img默认样式，它就可能塌掉。
性能与兼容性影响：现代浏览器都支持，但IE8及以下需要width: auto配合（已基本不用考虑）；Safari旧版对object-fit支持弱，所以别依赖它替代height: auto。
- 始终显式写
height: auto，哪怕你认为它“默认就是”——某些CSS重置库（如Normalize）会覆盖 - 给
img加vertical-align: middle防底部多出空白（行内元素基线对齐导致） - 如果图片来自CMS或用户上传，宽高属性缺失，可加
aspect-ratio: 16 / 9（现代浏览器）或用padding-top技巧兜底
一个真正可靠的最小样式组合
别只抄一句max-width: 100%。下面这四行解决95%的响应式图片问题，包括移动端缩放、Flex容器内收缩、加载中占位。
img {
max-width: 100%;
height: auto;
display: block;
vertical-align: middle;
}
容易被忽略的地方：很多项目只加了前两行，但display: block能干掉行内元素默认的底部间隙，vertical-align进一步加固对齐——这两处不写，有时在复杂布局里图片下方会空出几像素，影响视觉节奏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
