如何使用 CSS 调整大小时保持 Div 的长宽比？

如何响应式更改 Div 大小并保持宽高比

调整图像大小时，可以通过设置图像的宽度或宽度来轻松保持其宽高比高度以百分比表示。然而，对非图像元素实现相同的效果似乎具有挑战性。我们可以使用百分比链接 div 的宽度和高度，以在调整大小时保持宽高比吗？

解决方案

当然可以！ CSS 为这个问题提供了一个巧妙的解决方案。虽然看起来可能违反直觉，但填充顶部百分比实际上与包含块的宽度有关。这允许我们根据指定的宽度创建动态高度。

考虑以下 CSS 代码：

.wrapper {
  width: 50%; /* Set the desired width */
  display: inline-block;
  position: relative;
}
.wrapper:after {
  padding-top: 56.25%; /* 16:9 aspect ratio */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: deepskyblue;
  color: white;
}

在 HTML 中，我们将使用要调整大小的 div 进行包装“wrapper”类：

<div class="wrapper">
  <div class="main">
    This is your div with the specified aspect ratio.
  </div>
</div>

此 CSS 在“wrapper”div 中创建一个伪元素 (::after)。通过将其 padding-top 设置为包装器宽度的百分比，我们可以有效地修复其中 div 的纵横比。当包装器调整大小时，伪元素也会调整大小，确保所包含的 div（“main”）始终保持所需的宽高比。

以上是如何使用 CSS 调整大小时保持 Div 的长宽比？的详细内容。更多信息请关注PHP中文网其他相关文章！