CSS 实现 16:9 宽高比容器：padding 技巧与 aspect-ratio

在响应式布局里，有一个非常常见的需求：容器的宽度可以随屏幕变化，但宽高比必须固定为 16:9。

典型场景包括：

• 视频播放器占位（YouTube、Bilibili 嵌入）
• 文章封面 / 卡片缩略图
• Banner 或 Hero 区域的背景容器

实现方式主要有两种：经典的 padding 百分比技巧，以及现代浏览器原生支持的 aspect-ratio。下面从原理到完整代码逐一说明。

一、Padding 技巧（经典方案）

CSS 有一条反直觉的规则：

padding-top / padding-bottom 的百分比值，计算基准是父元素的宽度，而不是高度。

利用这一点，我们可以「借水平方向的尺寸来控制垂直方向」：

.ratio-box {
  width: 100%;
  padding-top: 56.25%; /* 9 ÷ 16 = 0.5625 */
  position: relative;
}

.ratio-box__content {
  position: absolute;
  inset: 0;
}

发生了什么：

1. 盒子宽度 = 父元素宽度的 100%
2. padding-top: 56.25% 计算出来的是 父元素宽度的 56.25%
3. 因此高度 = 宽度 × 0.5625，宽高比永远是 16:9
4. 内容用 absolute 定位填进 padding 撑出的空间里

为什么需要 absolute？

因为 padding 撑出来的是内边距区域，不是正常文档流里的可用空间——内容会排在 padding 后面。所以外层负责「撑比例」，内层负责「放内容」。

完整 HTML 结构：

<div class="ratio-box">
  <div class="ratio-box__content">
    <img src="/cover.jpg" alt="封面" />
  </div>
</div>

若内部是图片或视频，通常再配合 object-fit: cover 防止变形：

.ratio-box__content img,
.ratio-box__content video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

其他常用比例

---

二、aspect-ratio（现代方案）

2021 年起，主流浏览器陆续支持 aspect-ratio，写法极其直观：

.ratio-box {
  width: 100%;
  aspect-ratio: 16 / 9;
}

浏览器在布局阶段直接按声明计算高度：

高度 = 宽度 ÷ (16 / 9)

无需 padding hack，无需嵌套 DOM，无需 absolute 定位。内容在正常文档流里，溢出行为也更好控制。

配合 overflow: hidden 和 object-fit 同样适用：

.ratio-box {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
}

.ratio-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

只限制最大高度时

有时希望容器「宽了就跟宽走，高了也别超过某个上限」，可以组合 max-height：

.ratio-box {
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
}

---

三、iframe 嵌入实战

嵌入 B 站或 YouTube 视频时，16:9 容器几乎是标配：

<div class="video-wrapper">
  <iframe
    src="https://www.youtube.com/embed/xxxxx"
    title="视频"
    allowfullscreen
  ></iframe>
</div>

aspect-ratio 写法：

.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

padding 写法：

.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

两种写法效果一致，但 aspect-ratio 结构更扁平，维护成本更低。

---

四、方案对比

---

五、怎么选？

新项目、无需兼容 IE： 直接用 aspect-ratio，代码干净，语义明确。

老项目或极端兼容场景： padding 技巧依然有效，二十年来被无数站点验证过。

Tailwind CSS 用户： 框架已内置对应工具类：

<!-- aspect-ratio -->
<div class="aspect-video w-full">...</div>

<!-- aspect-video = aspect-ratio: 16 / 9 -->

---

总结

Padding 方案是「借水平方向的规则来控制垂直方向」的经典技巧；aspect-ratio 则是浏览器终于承认「开发者就是想要固定比例」而给出的正式 API。

无论哪种方式，核心目标都一样：让高度随宽度等比变化，而不是写死一个 px 值。在响应式时代，这才是让布局真正「活」起来的关键。