纵横比

---

了解如何使用 CSS 保持元素的纵横比。

---

纵横比

创建灵活的元素，在调整大小时保持其纵横比（4:3、16:9 等）:

什么是纵横比?

一个元素的纵横比描述了它的宽度和高度之间的比例关系。 两种常见的视频宽高比是 4:3（20 世纪的通用视频格式）和 16:9（高清电视和欧洲数字电视通用，YouTube 视频默认）。

---

如何 - 高度等于宽度

步骤 1) 添加 HTML:

使用容器元素，如 <div>，如果你想在其中添加文本，添加子元素:

实例

<div class="container">
  <div class="text">Some text</div> <!-- 如果你想要容器内的文本 -->
</div>

---

---

步骤 2) 添加 CSS:

为 padding-top 添加一个百分比值以保持 DIV 的纵横比。 以下示例将创建 1:1 的纵横比（高度和宽度始终相等）:

示例 1:1 纵横比

.container {
  background-color: red;
  width: 100%;
  padding-top: 100%; /* 1:1 纵横比 */
  position: relative; /* 如果你想要里面的文字 */
}

/* 如果您想要容器内的文本 */
.text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
亲自试一试 »

其他纵横比:

示例 16:9 纵横比

.container {
  padding-top: 56.25%; /* 16:9 纵横比（9 除以 16 = 0.5625） */
}
亲自试一试 »

示例 4:3 纵横比

.container {
  padding-top: 75%; /* 4:3 纵横比（3 除以 4 = 0.75） */
}
亲自试一试 »

示例 3:2 纵横比

.container {
  padding-top: 66.66%; /* 3:2 纵横比（2 除以 3 = 0.6666）  */
}
亲自试一试 »

示例 8:5 纵横比

.container {
  padding-top: 62.5%; /* 8:5 纵横比（5 除以 8 = 0.625） */
}
亲自试一试 »