根本原因是max-width:100%依赖父容器提供明确宽度参照，而父容器若为flex/absolute或未设width，则computed width为auto或异常大，导致百分比失效。
图片在移动端超出容器，根本原因不是“没写 max-width: 100%”，而是这个声明生效的前提被破坏了——它依赖的父容器宽度本身没被约束。
为什么 max-width: 100% 失效
这个 CSS 声明的百分比是相对于**直接父容器的 width 计算**的。如果父容器是 display: flex、position: absolute、或者没有显式设置 width（比如只靠内容撑开），它的 computed width 往往是 auto 或非常大，导致 max-width: 100% 实际参考值远超视口宽度。
用 DevTools 查看该图片父元素的 Computed → width，如果显示为 auto 或一个异常大的像素值（比如 1200px），就坐实了这个问题。
- 常见诱因：外层用了
flex布局但没设flex-shrink: 0，图片强行撑宽整个 flex item - 另一个坑：父容器设置了
width: fit-content或inline-block，也会让100%失去意义 - 更隐蔽的情况：图片在
grid容器里，而 grid track 没设minmax(0, 1fr)，导致列宽不收缩
object-fit: cover 配合固定容器尺寸
当你要让图片严格填满一个已知尺寸的区域（比如头像、卡片图），不要只靠缩放，要主动控制容器和图片的适配关系。
立即学习“前端免费学习笔记（深入）”；
关键不是“让图片变小”，而是“让图片按比例填满指定区域并裁剪多余部分”：
- 给图片容器（如
<div>）明确设 <code>width和height，比如width: 100vw; height: 50vh; - 图片本身设
width: 100%; height: 100%; object-fit: cover; - 必须加
overflow: hidden到容器上，否则裁剪边缘可能漏出（尤其在 Safari 上） - 避免同时设
max-width和固定width，两者冲突时行为不可控 - 页面有垂直滚动条时，
100vw包含滚动条宽度（通常 16px），可能导致图片轻微溢出；可改用100dvw（如果支持）或加box-sizing: border-box+padding-right: 16px补偿 - 不要对所有图片无差别用
100vw，比如图文混排中的内联图，会强制占满整行，破坏布局流 - 图片实际尺寸仍很大，浪费渲染资源，影响滚动性能
- 如果图片是
position: absolute子元素，overflow: hidden可能意外截断其定位范围 - 无法解决图片高度失控问题（比如竖图在横容器中撑高）
- 在某些安卓 WebView 中，
overflow: hidden对img的裁剪行为不一致
用 vw 跳过父级宽度链路
如果层级太深、父容器宽度来源复杂（比如嵌套多层 flex + absolute），最省事的办法是绕过它，直接以视口为基准：
img { max-width: 100vw; height: auto; }
注意：100vw 是视口宽度，不是父容器宽度，它不依赖任何祖先元素的 width 计算逻辑。但需警惕两点：
overflow: hidden 不是万能补丁
很多人第一反应是给父容器加 overflow: hidden，但这只是掩盖问题，不是解决根源。
它确实能视觉上“裁掉”溢出部分，但带来副作用：
真正要处理的是宽度链路和缩放逻辑，而不是靠裁剪兜底。
