max-width: 100% 仅在父容器有明确宽度且图片为块级元素时生效；需同时满足父容器content宽度可计算、display: block、无内联宽高属性、无flex/grid默认min-width拦截，否则失效。
因为 max-width: 100% 不是“自动缩放开关”，它只在父容器有可计算宽度、且图片处于块级上下文中才真正起效；绝大多数溢出问题，根源不在图片样式本身，而在它的计算前提被破坏了。
父容器 width 是 auto，max-width 就没参照物
浏览器计算 max-width: 100% 时，百分比必须有个明确的数值基准——即父容器的 content-box 宽度。如果父容器是 display: flex、position: absolute 或纯 div 未设 width，它的 computed width 往往是 auto 或异常大（比如 1200px），这时 100% 就等于那个飘忽的值，不是你想要的卡片或列宽。
- 用 DevTools 查看该图片直接父元素的 Computed → width，若显示
auto或远超预期，就确认了问题 - Flex 容器中，检查是否误设了
flex-shrink: 0—— 它会让子项拒绝缩小，直接废掉max-width - Grid 容器里，避免写死
grid-template-columns: repeat(4, 1fr)；小屏应改用repeat(auto-fit, minmax(250px, 1fr)))
img 默认是 inline 元素，max-width 参考的是行框，不是父容器
max-width: 100% 对 inline 元素生效时，实际参考的是当前行框（line box）宽度，而非父容器边界。再加上 baseline 对齐带来的底部留白，图片实际占用空间会大于容器宽度，导致横向溢出或触发水平滚动条。
- 必须加
display: block，让图片脱离行内流，使max-width真正相对于父容器 content 区域计算 -
vertical-align: top能消除底部间隙，但不如display: block彻底，且不解决行框参照问题 - 需要居中？加
margin: 0 auto，但前提是已设display: block
box-sizing 和 padding 让可用宽度变小了
即使父容器设了 width: 300px 且用了 box-sizing: border-box，它的总宽度 = content + padding + border，而 max-width: 100% 的 “100%” 仍只参考 content 区域。如果父容器有 padding: 16px，图片最多只能占 268px，但开发者常误以为它能撑满整个 300px 宽度。
- 检查父容器是否设置了
padding或border，并确认你是否意识到这些会压缩图片可用空间 - 不要同时写
width: 100%和max-width: 100%—— Safari 旧版会触发尺寸重算异常 - 若需图片严格贴边（含 padding 区），改用
width: 100%+height: auto，但要承担拉伸风险；max-width更安全，适合保比例场景
内联 width/height 属性或高优先级样式覆盖了 CSS
HTML 中图片自带的 width="800" 或 height="600" 是内联属性，优先级高于外部 CSS，会直接覆盖 max-width: 100%。另外，Bootstrap、CMS 富文本或框架注入的样式也可能用 ID 选择器或 !important 悄悄拦截你的规则。
- 删掉图片上的内联
width和height—— 这是最常被跳过的动作 - 检查是否有其他样式（如
white-space: nowrap、min-width: fit-content）干扰收缩逻辑 - 全局重置时，确保规则在 Bootstrap 等第三方 CSS 之后加载；否则
img { max-width: 100%; height: auto; }会被覆盖
真正棘手的地方在于：溢出从来不是单一原因造成的。往往要同时满足「父容器有明确宽度」+「图片为块级」+「无内联尺寸干扰」+「无 flex/grid 默认 min-width 拦截」这四个条件，max-width: 100% 才算真正落地。漏掉任意一环，它就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
