根本原因是max-width:100%仅在父容器有明确宽度且img为块级元素时生效；需配合display:block、height:auto、box-sizing:border-box及父容器宽度约束才能真正防溢出。
为什么只加 max-width: 100% 还是溢出
因为 max-width: 100% 不是万能开关，它只在父容器有可计算宽度、且图片自身处于「块级上下文」时才真正生效。常见失效场景包括：
• 父容器是 display: flex 或 position: absolute，但没设 width 或 flex-basis
• 图片仍是 inline 元素，默认 baseline 对齐导致底部留白，实际占用空间大于容器宽度
• 父容器设置了 padding 或 border，而你没用 box-sizing: border-box，max-width: 100% 只参考 content 区域，不包含 padding
• 外层有 white-space: nowrap 或 min-width 干扰，图片被“撑住”无法缩小
img 必须配 height: auto 和 display: block
这两个声明不是可选，而是保比例缩放的硬性条件：
• height: auto 让浏览器按原始宽高比推算高度；漏掉它，height 会退化为 auto（内容高度）或 0（某些旧引擎），导致图片塌陷或拉伸
• display: block 把图片从行内流里抽出来，使 max-width: 100% 真正相对于父容器计算；不加它，max-width 实际作用于行框（line box），而非父容器边界
• 如果需要居中，加 margin: 0 auto（前提是已设 display: block）
父容器没宽度，max-width 就没意义
max-width: 100% 的 “100%” 是相对值，必须有参照物。如果父容器宽度是 auto 且无约束（比如没设 width、不在 grid/flex 中、也没被其他元素限定），那它的“100%”就等于视口宽度或不可预测的行宽。
• 检查父容器 computed width 是否为具体数值（用 DevTools 查）
• 若父容器是 flex 子项，确认没设 flex-shrink: 0 —— 它会让图片拒绝缩小
• 若父容器是卡片类结构（如 Bootstrap .card），确保它本身有栅格类（如 .col-md-6）或显式 width
• 避免用 overflow: hidden 治标：它只是藏起来，不解决布局计算问题
需要填满固定尺寸容器？别只靠 max-width
当父容器有明确宽高（比如 width: 300px; height: 200px），而你又希望图片填满且不拉伸，max-width: 100% 就不够用了：
• 它只能防溢出，不能控制裁剪或对齐方式
• 此时要用 object-fit: cover 或 contain，但必须配合 width: 100%; height: 100% 才生效
• 注意兼容性：object-fit 在 IE 完全不支持，iOS Safari 10.3+ 才稳定，老项目得 fallback（比如用背景图 + background-size）
• 内联 SVG 不是 img，得单独处理：svg 标签需用 width/height 或 aspect-ratio 控制，max-width 仅对其外层容器有效
max-width: 100% 的约束力，永远受限于父容器自身的尺寸是否明确。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
