图片溢出主因是父容器未设宽高约束，而非img自身问题；需确保父容器有width/max-width，img配max-width:100%、height:auto及display:block，并在flex/grid中调整flex属性或object-fit。
直接给 img 加 max-width: 100% 和 height: auto 是起点，但 90% 的溢出问题其实出在父容器——图片再守规矩，也缩不到比父容器还宽的范围里去。
为什么只写 max-width: 100% 还是溢出
这不是 img 不听话，而是它没“参照物”可缩：
- 父容器是
display: flex或position: absolute，且没设width或max-width——max-width: 100%算不出 100% 是多少 - Flex 容器中
img默认flex-shrink: 0，拒绝缩小，哪怕写了max-width - 父级有
white-space: nowrap或display: inline-block且没配overflow: hidden，图片会“滑出去” - 外层
padding/margin/border叠加后总尺寸超标，而box-sizing又是默认的content-box
img 必须同时设 max-width: 100% 和 height: auto
少一个就可能拉伸、塌陷或裁边：
-
max-width: 100%是“上限”，图片小就保持原样，大才缩；只写width: 100%会强制拉伸 -
height: auto是比例锚点，确保缩放时宽高比不变；只写max-height不控宽，图片会被压扁 - 额外建议加
display: block，消除img默认的inline底部空白
Flex/Grid 布局中图片并排时的溢出陷阱
当 img 和文本同在 display: flex 容器里，max-width: 100% 会让图片抢走全部主轴空间：
- 改用
flex: 0 1 auto，允许图片收缩；或显式设max-width: 50%（按需调整） - 若需填满固定尺寸容器（如卡片头图），必须配合
object-fit: cover或contain，且父容器要有明确宽高 -
object-fit在 IE 中完全不支持，iOS Safari 10.3+ 才稳定，旧项目得 fallback 到背景图或 JS 计算
绝对定位图片导致父容器无法包裹
一旦 img 或 picture 设了 position: absolute，它就脱离文档流，父容器高度塌陷：
- 优先重构为 Flex/Grid/浮动布局，让图片留在文档流中
- 若必须用绝对定位（如装饰性背景图），父容器需手动设高度，或用
aspect-ratio+min-height占位 - 不要指望
height: auto在绝对定位下还能撑开父容器——它已经不参与计算了
最易被忽略的是：父容器本身没设 max-width 或 width，却指望子元素图片自动约束。图片缩放永远受限于它的直接父级宽度上下文，不是屏幕宽度，也不是 body 宽度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
