max-width: 100% 的“100%”参考直接父容器的 content-box 宽度，非视口、祖父容器或主观预期；需配合 display: block 和 height: auto 才生效，且在 flex 中须设 min-width: 0 防撑开。
max-width: 100% 的“100%”到底参考谁？
它只认**直接父容器的 content-box 宽度**，不是视口、不是祖父容器、更不是你心里想的那个宽度。如果父容器 computed width 是 auto 或一个异常大的值（比如 1200px），那 max-width: 100% 就会失效——图片照常撑开。
常见诱因包括：
- 父容器是
display: flex但没设flex-basis或width - 父容器用了
position: absolute且没给width - 外层是
grid，但列轨道没写minmax(0, 1fr)，导致列宽不收缩 - 父容器是
inline-block或width: fit-content，百分比失去意义
img 默认是 inline 元素，这很关键
max-width: 100% 对 inline 元素的作用对象是「行框」（line box），不是父容器边界。再加上 baseline 对齐带来的底部留白，实际占用空间远超视觉预期。
必须加这两条才能让它真正按父容器算：
-
display: block—— 把图片拉出行内流，让max-width参照父容器 content 区 -
height: auto—— 否则高度可能塌陷为0或被浏览器错误推算
漏掉任意一条，都可能在 Safari 或旧版 Chrome 中看到溢出或布局抖动。
Flex 容器里图片撑开布局，min-width: 0 是隐藏开关
Flex 子项默认 min-width: auto，浏览器会拒绝压缩图片——哪怕你写了 max-width: 100%，它也优先保原始尺寸。
解决方法很简单，但极易被忽略：
- 给
img显式加min-width: 0 - 同时确认父容器 flex item 没设
flex-shrink: 0 - 若父容器是
align-items: stretch（默认），加align-self: flex-start防垂直拉伸
别依赖 overflow: hidden 掩盖问题
加了 overflow: hidden 看似图片不溢出了，但实际渲染尺寸没变：大图仍被完整加载、解码、绘制，只是被裁掉——滚动卡顿、内存占用高、LCP 延迟都会变糟。
更麻烦的是，某些场景下（比如 Safari + transform 加速）它还会引发模糊或 1px 错位。真正要做的，是让图片尺寸从源头可控：
- 优先用
max-width: 100vw跳过父级宽度链路（注意滚动条宽度干扰） - 若需填满固定区域，改用
width: 100%; height: 100%; object-fit: cover;+ 容器overflow: hidden - 检查所有祖先元素，确保至少有一层有明确
width、max-width，或处于受 track 限制的grid/flex中
img 本身，而在它上面三层的某个 div 没设宽、某个 flex 没配 shrink、或者开发者工具里看到的 computed width 是 auto 却没当回事。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
