如何使用 CSS 保持基於高度的 Div 寬高比？

使用CSS 維護基於高度的Div 寬高比

在某些情況下，您可能需要確保元素的寬度保持為它的高度，無論高度的變化如何。雖然有針對此問題的 JavaScript 解決方案，但 CSS 也可以提供一種優雅的方法。

要實現此目的，請利用寬高比屬性：

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

這裡是寬高比屬性真正的用處閃耀：

• 它在元素的高度和寬度之間建立了固定的關係。
• 因此，無論什麼情況，框的長寬比（在本例中為 2:1）都會保持不變。視窗高度發生變化。

此解決方案可確保元素的寬度始終為其高度的 50%，即使視窗垂直調整大小也是如此。

以上是如何使用 CSS 保持基於高度的 Div 寬高比？的詳細內容。更多資訊請關注PHP中文網其他相關文章！