响应式图片溢出主因是父容器未约束，而非图片样式缺失；需同时设 max-width: 100%、height: auto 和 display: block，并确保父容器有明确宽度、box-sizing: border-box 及合理 flex 属性。
直接给 img 设 max-width: 100% 并配合 height: auto，是解决响应式图片溢出最可靠的第一步。但仅写这一条规则，90% 的溢出问题依然存在——因为溢出通常不是图片本身的问题，而是它所处的上下文没被正确约束。
为什么只加 max-width: 100% 还是溢出
常见现象：图片在小屏上仍撑破父容器、出现水平滚动条、或被裁剪变形。
- 父容器没设宽度（比如
display: flex或position: absolute的容器默认不占宽）——max-width: 100%没有参照物，等于无效 - 父级用了
white-space: nowrap或display: inline-block且未配overflow: hidden，图片会“逃逸”出边界 - Flex 容器中子项默认
flex-shrink: 0，图片拒绝缩小，哪怕写了max-width - 外层有
margin/padding/border叠加后总尺寸超标，而box-sizing又是content-box
img 必须同时设 max-width: 100% 和 height: auto
单独设 width: 100% 会强制拉伸；只设 height: auto 不管宽度，浏览器可能按固有尺寸渲染导致溢出；设 max-height 却不控宽，图片会被压扁或裁边。
-
max-width: 100%是“上限”，图片小就保持原样，大才缩 -
height: auto是“比例锚点”，确保缩放时宽高比不变 - 额外建议加
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 计算
内联 SVG、Base64 图片也要加 max-width
它们通过 <img src="data:image/svg+xml,..."> 引入时，行为和普通图片完全一致，max-width: 100% 照常生效。
- 但内联
<svg></svg>标签不是img元素，得用width/height或aspect-ratio配合max-width - SVG 自带
viewBox时，固有宽高可能干扰缩放逻辑，容易被忽略 - 最易被忽略的是：父容器本身没设
max-width或width，却指望子元素图片自动约束——图片再听话，也缩不到比父容器还小的范围里去
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
