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% 就可能退化成“视口宽度”，反而更难控。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 确保父容器有明确尺寸约束（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 能管住图片——它连门都没进。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！