应设 img 的 max-width: 100% 且 height: auto，避免同时设 width 和 height 像素值；溢出常因父容器 white-space、flex-shrink 或 box-sizing 等导致；固定宽高容器可用 object-fit: cover/contain，注意兼容性；内联 SVG 需单独处理。
图片在响应式容器里撑破父级怎么办
直接给 img 设 max-width: 100%，同时去掉 height 的固定值。这是最常用也最有效的起点。
常见错误是只加 width: 100% 或只设 height: auto，结果在某些浏览器或嵌套场景下依然溢出；或者误用 max-height 却没管宽度，导致图片被拉伸或裁剪。
-
max-width: 100%让图片宽度不超父容器，且保留原始宽高比 - 必须配合
height: auto，否则高度会被浏览器按默认规则（如height: initial）重置为 0 或内容高度，破坏比例 - 不要对
img同时设width和height（尤其是像素值），这会强制拉伸，且在不同屏幕下失效
为什么用了max-width还是溢出？检查这些地方
溢出往往不是 img 自身的问题，而是父容器或 CSS 层叠干扰了计算。
- 父元素是否设置了
white-space: nowrap或display: inline-block且未设overflow: hidden？这会让图片“逃出”边界 - 是否在
img外层用了flex容器但没设flex-shrink: 1？默认flex-shrink: 0会让图片拒绝缩小 - 是否有其他样式（比如
margin、padding、border）叠加后让总尺寸超标？记得检查box-sizing是否为border-box
需要等比例缩放但又不能留白？用object-fit
当容器有固定宽高（比如卡片头图），又想让图片填满且不拉伸，object-fit 是比 JS 或背景图更干净的方案。
-
object-fit: cover填满容器，可能裁剪边缘 —— 适合封面图 -
object-fit: contain完整显示，留白不可避免 —— 适合图标、Logo - 必须配合
width: 100%和height: 100%才生效，且父容器需有明确宽高 - 注意兼容性：
object-fit在 IE 完全不支持，iOS Safari 10.3+ 才稳定，旧项目需 fallback
内联SVG或Base64图片也要处理吗
要。它们本质仍是 img 元素，同样受 max-width 和 height 控制，但有个关键差异：内联 SVG 可能带 viewBox 和固有宽高，容易忽略。
- Base64 图片和普通
src图片行为一致，max-width: 100%照常生效 - SVG 如果是通过
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
