仅设 max-width: 100% 仍溢出，因该值基于父容器计算，而父容器可能因 box-sizing: content-box、padding/border、flex/absolute 定位等导致宽度失真；须配合 box-sizing: border-box（设于父容器）、height: auto 和 display: block 才完整生效。
为什么只写 max-width: 100% 还是溢出
因为 max-width: 100% 的“100%”是相对于父容器的宽度计算的，而这个宽度本身可能已经失真。常见情况包括：父容器用了 content-box 盒模型，但又加了 padding 或 border，导致实际占位超出你写的 width: 100%；或者父容器是 flex 或 absolute 定位，根本没生成有效宽度参照。图片再守规矩，也缩不到一个“不存在的宽度”里去。
box-sizing: border-box 必须设在父容器上
这不是可选项，是前提条件。尤其当父容器有 padding、border 或被嵌套在 flex/grid 中时：
- 给图片的直接父容器加
box-sizing: border-box，确保它声明的width包含内边距和边框 - 全局重置更省心：
* { box-sizing: border-box; }或至少*::before, *::after一并包含 - 别只给
img设box-sizing——它对替换元素（如图片）无效，浏览器会忽略
配合 max-width: 100% 和 height: auto 才完整
三者缺一不可，各自承担不同职责：
-
max-width: 100%是上限控制，图片宽超父容器才缩，不超就保持原尺寸 -
height: auto是比例锚点，防止浏览器按默认规则把高度算成0或内容高度，破坏宽高比 -
display: block推荐加上，消除img默认的 inline 基线对齐带来的底部空白，避免意外撑高父容器
单独漏掉任意一个，都可能在 iOS Safari、旧版 Chrome 或 flex 子项中复现溢出。
绝对定位图片必须绕开 box-sizing 单独处理
如果用了 position: absolute，box-sizing 就完全不相关了——因为图片已脱离文档流，父容器压根不感知它的尺寸。此时：
- 优先改用
background-image+background-size: cover/contain，容器仍在流内 - 若必须用
<img>绝对定位，得靠 JS 动态读取图片自然尺寸并设置父容器min-height，或用aspect-ratio配合object-fit -
object-fit要生效，父容器必须有明确宽高，且图片需设width: 100%; height: 100%，不能只靠max-width
最容易被忽略的是：你调好了所有 img 样式，却忘了父容器本身没设 width 或 max-width，那所有约束都是空中楼阁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
