max-width: 100% 的参照对象是最近有明确宽度的包含块，而非视觉父容器；需确保父容器有可计算宽度、图片设 display: block 和 height: auto、Flex 子项加 min-width: 0，并统一 box-sizing。
max-width: 100% 的参照对象不是你看到的父容器
它只认「最近的、有明确宽度的包含块」。如果父容器是 display: flex 且没设 width 或 flex-basis，它的 computed width 往往是 auto 或异常大（比如 1200px），那 max-width: 100% 就等于那个值，而不是你预期的卡片宽度。用 DevTools 查父元素的 Computed → width，如果是 auto 或远超视口，就坐实了这个问题。
常见干扰场景包括：
-
position: absolute的父容器没设position: relative，包含块退化为视口 - 父容器是
display: inline-block或width: fit-content，百分比失去意义 - 外层用了
white-space: nowrap，图片被“锁住”无法缩小
img 默认是 inline 元素，max-width 作用在行框上
max-width: 100% 写在 <img> 上，但默认它是 inline 元素，实际约束的是「一行能放多宽」，不是父容器边界。底部 baseline 对齐还会额外留白，进一步放大占用空间。
必须加这两条才真正生效：
立即学习“前端免费学习笔记（深入）”；
-
display: block—— 把图片拉出行内流，让max-width相对父容器计算 -
height: auto—— 否则高度可能塌成 0 或错乱，比例断裂
如果还要居中，得补 margin: 0 auto（前提是已设 display: block）。
Flex 容器里图片死活不缩，min-width: 0 是开关
Flex 子项中的 <img> 有隐式 min-width: auto，浏览器会拒绝把它压缩到比原始尺寸还小。光写 max-width: 100% 和 flex-shrink: 1 没用，Safari 尤其严格。
三者必须同时存在：
max-width: 100%height: auto-
min-width: 0—— 这个才是关键开关，缺了就白搭
顺带检查父容器是否设了 flex-shrink: 0 或 align-items: stretch（默认值），后者会让图片被垂直拉伸。
box-sizing 和 padding 让“100%”悄悄缩水
父容器若设了 padding 或 border，而你又没用 box-sizing: border-box，那 max-width: 100% 只参考 content 区域宽度，不包含内边距和边框。比如父容器总宽 400px、padding: 16px，图片最多只能占 368px，但你没意识到这点，以为“明明写了 100% 却还是溢出”。
更隐蔽的问题是：父容器本身没显式宽度，却指望子元素靠百分比自适应——图片再听话，也缩不到比父容器还小的范围里去。
真正卡点不在怎么写 CSS，而在是否意识到：max-width: 100% 不是自动适配按钮，它是一条依赖链：父容器要有宽 → 宽要可计算 → 图片要脱离行内流 → 替换元素要解除 min-width 锁定 → 盒模型要一致。漏掉任一环，都会在某个设备或嵌套层级里突然失效。
