box-sizing 对 img 等替换元素完全无效，因其尺寸由固有宽高或 width/height 决定；正确响应式方案是 display: block + max-width: 100% + height: auto。
box-sizing 对 img 根本不生效
box-sizing 只影响元素自身的尺寸计算逻辑，而 img 是替换元素（replaced element），它的宽高由固有尺寸或 width/height 属性决定，box-sizing 完全不参与其渲染流程。即使你给 img 加了 box-sizing: border-box，浏览器也直接忽略——DevTools 的 Computed 面板里根本不会显示这个值。
max-width: 100% 必须配合 display: block
只写 max-width: 100% 不够，因为 img 默认是 display: inline，它受行内格式化上下文约束：max-width 实际参照的是“行框宽度”，不是父容器的 content 区域。结果就是图片照常溢出，尤其在有 padding 的卡片里。
- 加
display: block让它脱离行内流，max-width: 100%才真正相对于父容器计算 - 或者用
vertical-align: top消除基线间隙，但不如display: block彻底 - 若需居中，必须先设
display: block，再加margin: 0 auto
父容器的 padding 和 box-sizing 会偷偷压缩可用空间
假设父容器写了 width: 300px; padding: 16px; box-sizing: border-box，它的总宽确实是 300px，但 content 区只有 300px - 32px = 268px。max-width: 100% 的 img 只能撑到 268px，而不是你肉眼看到的“300px 宽度”。这时候如果图片原始宽 800px，它仍会按比例缩放到 268px —— 看似正常，但若父容器没设明确 width（比如 width: auto），max-width: 100% 就可能退化成“视口宽度”，反而更难控。
- 确保父容器有明确尺寸约束（
width、flex-basis或grid-column） - 不要依赖
width: 100%+height: auto，它会拉伸变形；max-width: 100%更安全 - 如需填满带 padding 的区域，得用
width: calc(100% + 32px)这类反向补偿，但极易出错，不推荐
svg、iframe 这些替换元素同样被忽略
svg、iframe 和 img 一样，box-sizing 对它们无效。它们都得单独处理：
立即学习“前端免费学习笔记（深入）”；
-
svg：加max-width: 100%; height: auto; display: block -
iframe：除了max-width: 100%; height: auto，还得补width: 100%（否则某些浏览器下宽度失效） - 所有替换元素都不继承父级的
box-sizing，也不响应flex-shrink默认行为，容易在 Flex 容器里卡住不动
真正起效的组合永远是：display: block + max-width: 100% + height: auto，缺一不可。别指望 box-sizing 能管住图片——它连门都没进。
