如何保持寬高比

學習如何使用 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;
}

親自試一試

表中的數字注明了完全支持該屬性的首個瀏覽器版本。