应设 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 如果是通过
<img src="data:image/svg+xml,...>%20%E5%BC%95%E5%85%A5%EF%BC%8C%E5%AE%83%E5%B0%B1%E6%98%AF%E4%B8%AA%E5%9B%BE%E5%83%8F%E8%B5%84%E6%BA%90%EF%BC%8C%E5%90%8C%E7%90%86%E5%A4%84%E7%90%86 %0A - %E4%BD%86%E5%A6%82%E6%9E%9C%E6%8A%8A%20SVG%20%E5%86%99%E6%88%90%E5%86%85%E8%81%94%E6%A0%87%E7%AD%BE%EF%BC%88
<svg>%EF%BC%89%EF%BC%8C%E9%82%A3%E5%B0%B1%E4%B8%8D%E6%98%AF%20img%20%E4%BA%86%EF%BC%8C%E5%BE%97%E7%94%A8%20width/height%20%E6%88%96%20aspect-ratio%20%E9%85%8D%E5%90%88%20max-width%0A
%E6%9C%80%E6%98%93%E8%A2%AB%E5%BF%BD%E7%95%A5%E7%9A%84%E6%98%AF%EF%BC%9A%E7%88%B6%E5%AE%B9%E5%99%A8%E6%9C%AC%E8%BA%AB%E6%B2%A1%E8%AE%BE%20max-width%EF%BC%8C%E5%8D%B4%E6%8C%87%E6%9C%9B%E5%AD%90%E5%85%83%E7%B4%A0%E5%9B%BE%E7%89%87%E8%87%AA%E5%8A%A8%E7%BA%A6%E6%9D%9F%E2%80%94%E2%80%94%E5%9B%BE%E7%89%87%E5%86%8D%E5%90%AC%E8%AF%9D%EF%BC%8C%E4%B9%9F%E7%BC%A9%E4%B8%8D%E5%88%B0%E6%AF%94%E7%88%B6%E5%AE%B9%E5%99%A8%E8%BF%98%E5%B0%8F%E7%9A%84%E8%8C%83%E5%9B%B4%E9%87%8C%E5%8E%BB%E3%80%82
