如何保持宽高比

学习如何使用 CSS 保持元素的宽高比。

宽高比

创建可灵活调整大小的元素,同时保持其宽高比(4:3、16:9等):

什么是宽高比?

元素的宽高比描述的是其宽度和高度之间的比例关系。两种常见的视频宽高比是 4:3(20 世纪的通用视频格式)和 16:9(高清电视和欧洲数字电视以及 YouTube 视频的通用格式)。

如何实现 - 高度等于宽度

第一步 - 添加 HTML:

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

<div class="container">
  <div class="text">Some text</div> <!-- 如果您希望容器内有文本 -->
</div>

第二步 - 添加 CSS:

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

实例 - 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) */
}

亲自试一试

CSS aspect-ratio 属性

在较新的浏览器中,您可以简单地使用 CSS aspect-ratio 属性:

实例 - 3:2 宽高比

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

亲自试一试

表中的数字注明了完全支持该属性的首个浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
88 88 89 15 74