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