如何使用 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中文網其他相關文章！