如何保持宽高比

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

如何实现 - 高度等于宽度

第一步 - 添加 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;
}

亲自试一试

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