图片撑破父容器的根本原因是img作为替换元素默认按固有尺寸渲染，且为inline元素导致max-width:100%失效；需设display:block并确保父容器尺寸明确、box-sizing:border-box。
图片超出父容器的典型表现和根本原因
图片撑破父盒子，常见于响应式布局中——比如在 width: 300px 的卡片里插入一张原图宽 800px 的 <img>，结果横向溢出、触发滚动条或破坏栅格对齐。这不是 CSS “没生效”，而是默认情况下 <img> 是替换元素（replaced element），其尺寸由自身固有宽高决定，width 和 height 属性仅在未显式设置时才退化为“按内容撑开”，而 max-width 不会自动继承父级限制。
max-width: 100% 必须配合 display: block
很多开发者只加了 max-width: 100% 却仍溢出，是因为 <img> 默认是 inline 元素，会受行内盒模型影响：底部留白（baseline 对齐导致的间隙）、换行符被当空白字符参与布局，导致实际宽度计算异常。此时 max-width 作用对象是“行框宽度”，而非父容器宽度。
解决方法很简单：
- 给图片加
display: block，让它脱离行内流，使max-width: 100%真正相对于父容器计算 - 或者用
vertical-align: top/middle/bottom消除基线间隙（但不如display: block彻底） - 若需居中，用
margin: 0 auto（前提是已设为block）
盒模型边界：padding、border 和 box-sizing 的隐性影响
即使设置了 max-width: 100% 和 display: block，图片仍可能溢出——尤其是父容器设置了 padding 或 border。因为 max-width: 100% 计算的是父容器的 content-box 宽度（不含 padding 和 border），而如果父容器用了 box-sizing: border-box，它的总宽度 = content + padding + border，但子元素的 100% 依然只参考 content 区域。
更隐蔽的问题是：父容器本身宽度可能不明确（比如 width: auto 且无约束），此时 max-width: 100% 实际等于“可用行宽”，未必是你预期的卡片宽度。
建议统一做法：
- 父容器显式设置
width或通过 flex/grid 限定尺寸 - 确保父容器
box-sizing: border-box（现代项目基本都这样），并意识到padding会压缩图片可用空间 - 如需图片严格贴边（含 padding 区），改用
width: 100%+height: auto，但要承担拉伸风险；max-width更安全，适合保比例场景
响应式图片的进阶控制：object-fit 与 aspect-ratio
max-width: 100% 只解决“不撑破”，不解决“变形”或“留白”。比如固定高宽比容器中，图片宽高比不匹配时，会出现上下/左右空隙，或被拉伸。
这时需要组合使用：
-
object-fit: cover—— 类似背景图background-size: cover，裁剪填满，保持比例 -
object-fit: contain—— 完整显示，留白，适合图标或证件照 -
aspect-ratio: 16 / 9（配合width: 100%）—— 强制容器维持比例，再让图片自适应，避免布局抖动
注意：object-fit 对 IE 完全不支持，aspect-ratio 在 Safari 15.4+ 才稳定，生产环境需查 Can I Use 并配降级方案（如伪元素 padding-top 技巧）。
真正卡住人的往往不是 max-width: 100% 这一行代码，而是它依赖的上下文：父容器是否可尺寸、是否带内边距、图片是否还在行内流里飘着。调的时候别只盯着 img 标签，往上两层检查盒模型和 display 类型，比反复改 width 值快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
