根據高度維護 Div 縱橫比

將元素的寬度保持為其高度的百分比可能具有挑戰性。雖然使用 padding-top 的百分比值可以達到相反的效果，但 padding-left 作為百分比依賴於物件的寬度，而不是其高度。

為了解決這個問題，CSS 引入了寬高比屬性，提供一個優雅的解決方案來根據高度保持一致的縱橫比。以下程式碼片段示範了其用法：

.box {
  height: 50%;
  background-color: #3CF;
  aspect-ratio: 2 / 1;
}

在此範例中，.box 元素的流體高度為 50%，縱橫比為 2:1。當容器的高度改變時，框的高度和寬度會隨之調整，同時保留其縱橫比。

縱橫比屬性可確保框的寬度與其高度保持成比例，而不管文字內容或容器的大小如何。這消除了對複雜 JavaScript 解決方案的需求，並提供了一種乾淨、高效的純 CSS 方法來維護寬高比。