CSS 根据高度维持 div 的宽高比

在本文中，我们将介绍如何使用 CSS 来根据高度维持 div 的宽高比。在许多情况下，我们会遇到需要保持一个 div 元素的宽高比例的需求。例如，在网页布局中，我们可能会希望在调整浏览器窗口大小时保持图像的宽高比；或者，在响应式设计中，我们需要确保文字或图片在不同设备上具有一致的宽高比。

阅读更多：CSS 教程

使用 padding 来实现

一种常见的方法是使用 padding 属性来实现。我们可以设置一个固定的 padding-top 或 padding-bottom 值来确保 div 元素的宽高比例。具体步骤如下：

首先，创建一个父元素，为 div 设置一个固定的宽度或高度；
然后，为 div 设置一个 padding-top 或 padding-bottom 的百分比值，该值与 div 的宽高比例相同。

接下来，让我们来看一个具体的示例。假设我们有一个父元素，宽度为 400px，我们希望 div 的宽高比例为 16:9。那么我们可以按照以下方式设置 CSS 样式：

.parent {
  width: 400px;
}

.child {
  padding-top: 56.25%; /* 9 ÷ 16 = 0.5625 */
}

在这个示例中，我们将父元素的宽度设置为 400px，并将子元素的 padding-top 值设置为 56.25%。这样，子元素的宽高比例将保持为 16:9。

使用绝对定位来实现

除了使用 padding，我们还可以使用绝对定位来实现 div 的宽高比例。这种方法适用于我们希望将 div 直接精确地放入一个容器元素中，并且容器元素本身没有固定的宽度或高度。

具体步骤如下：

创建一个容器元素，不设置任何宽度或高度；
创建一个绝对定位的 div 元素，并设置左上角和右下角的位置；
使用 padding-bottom 属性来设置 div 元素的高度，保持与容器元素的宽高比例一致。

下面是一个示例，说明如何通过绝对定位来实现 div 的宽高比例。假设我们有一个容器元素，其宽度由内容决定，我们希望 div 的宽高比例为 4:3。我们可以按照以下方式设置 CSS 样式：

.container {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-bottom: 75%; /* 3 ÷ 4 = 0.75 */
}

在这个示例中，我们在容器元素上设置了 position: relative，并在子元素上设置了 position: absolute。通过设置子元素的上、左、右位置为 0，我们确保子元素与容器元素紧密连接。然后，我们将子元素的 padding-bottom 设置为 75%。这样，子元素的宽高比例将保持为 4:3。

使用伪元素来实现

除了使用 padding 和绝对定位，我们还可以使用伪元素来实现 div 的宽高比例。这种方法适用于我们希望在一个普通的 div 元素内部实现宽高比例。

具体步骤如下：

创建一个普通的 div 元素，不设置任何宽度或高度；
为该 div 元素添加一个伪元素，设置 padding-top 或 padding-bottom 为一个百分比值；
调整伪元素的内容样式，使其与 div 的宽高比例保持一致。

下面是一个示例，说明如何通过伪元素来实现 div 的宽高比例。假设我们有一个普通的 div 元素，我们希望它的宽高比例为 3:2。我们可以按照以下方式设置 CSS 样式：

.div {
  position: relative;
}

.div::before {
  content: "";
  display: block;
  padding-top: 66.6667%; /* 2 ÷ 3 ≈ 0.6667 */
}

.div p {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 10px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
}

在这个示例中，我们在 div 元素上设置了 position: relative，并为其添加了一个伪元素 ::before。伪元素的 padding-top 值被设置为 66.6667%，以确保它的宽高比例为 3:2。我们还调整了伪元素的内容样式，使其作为背景层，并设置了一些样式属性，如颜色和背景透明度。