如何操作 - 纵横比

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

纵横比

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

什么是纵横比？

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

操作方法 - 高度等于宽度

步骤1）添加HTML：

使用容器元素，例如 <div>，如果您想要其中包含文本，请添加一个子元素：

示例

步骤2）添加CSS：

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

示例 1:1 纵横比

.container {
  background-color: red;
  width: 100%;
padding-top: 100%; /* 1:1 Aspect Ratio */
position: relative; /* If you want text inside of it */
}

/* If you want text inside of the container */
.text {
position: absolute;
top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

亲自试一试 »

其他长宽比：

示例 16:9 纵横比

.container {
padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

亲自试一试 »

示例 4:3 纵横比

.container {
padding-top: 75%; /* 4:3 Aspect Ratio (divide 3 by 4 = 0.75) */
}

亲自试一试 »

示例 3:2 纵横比

.container {
padding-top: 66.66%; /* 3:2 Aspect Ratio (divide 2 by 3 = 0.6666) */
}

亲自试一试 »

示例 8:5 纵横比

.container {
padding-top: 62.5%; /* 8:5 Aspect Ratio (divide 5 by 8 = 0.625) */
}

亲自试一试 »

CSS 宽高比属性

在较新的浏览器中，您可以简单地使用 CSSaspect-ratio属性：

示例 3:2 纵横比

.container {
aspect-ratio: 3 / 2;
}

亲自试一试 »

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
aspect-ratio	88	88	89	15	74