如何使用 CSS 根据 Div 的高度保持其纵横比？

使用 CSS 维护基于高度的 Div 宽高比

当涉及到维护元素的比例时，传统的解决方案是使用垂直填充的百分比值。然而，使用水平填充实现相同的效果并不那么简单。本文探讨了一种基于 CSS 的方法，根据 div 元素的高度来保留其宽高比。

所需的标记结构如下：

<div class="box">
  <div class="inner"></div>
</div>

保持宽高比，我们可以利用CSS的aspect-ratio属性：

<code class="css">.box {
  height: 50%;
  background-color: #3CF;
  aspect-ratio: 2 / 1;
}</code>

aspect-ratio属性指定元素的宽度与高度的比率。在这种情况下，比例为 2:1 表示宽度将是高度的两倍。

通过将父元素（盒子）的高度设置为流体值（例如 50%）并调整其aspect-ratio 属性，我们可以确保其宽度与高度成比例缩放。

为了演示效果，您可以考虑以下 HTML 和 CSS 代码：

<code class="html"><div class="demo">
  <div class="box">
    <ul>
      <li>This box has fluid height of 50%</li>
      <li>It has an aspect ratio of 2:1</li>
      <li>Resize the container vertically (or horizontally)</li>
      <li>The box will maintain its aspect ratio</li>
      <li>The text content will not affect its width</li>
    </ul>
  </div>
</div></code>

<code class="css">.demo {
  width: 90vw;
  height: 90vh;
  overflow: auto;
  resize: both;
  outline: 1px solid #999;
}</code>

调整容器（.demo）的大小将演示盒子（box）调整其宽度，同时保持其2:1的长宽比。该解决方案提供了一种干净有效的方法来纯粹通过 CSS 保留元素所需的比例。

以上是如何使用 CSS 根据 Div 的高度保持其纵横比？的详细内容。更多信息请关注PHP中文网其他相关文章！