確保視口中的縱橫比保留

在網頁設計中，在適應可變視口尺寸的同時保持元素的縱橫比至關重要。這確保了不同螢幕尺寸和方向的一致性。為了在處理方形元素時實現這種保留，可以實現以下CSS 方法：

利用寬高比屬性

從2022 年開始，寬高比-ratio屬性為控制元素的縱橫比提供了一個強大的解決方案。透過指定所需的寬高比，此屬性會調整元素的大小以維持指定的比率。至關重要的是，尺寸自適應受到視口最小尺寸的限制，滿足橫向和縱向動態調整的要求。

範例實作

示範寬高比屬性的功能，可以使用以下程式碼：

Aspect ratio 1:1
Aspect ratio 1:19

.ar-1-1 {
  aspect-ratio: 1 / 1;
  background: orange;
}

.ar-1-19 {
  aspect-ratio: 16 / 9;
  background: pink;
}

div {
  max-width: 100vw;
  max-height: 100vh;
  margin-bottom: 5vh;
}

在此範例中，建立了兩個具有不同寬高比（1:1 和 16:9）的 div。縱橫比屬性可確保無論裝置的方向為何，這些 div 在視窗中都保持其所需的形狀和大小。此外，它們的尺寸被調整以適應視窗的最小尺寸，確保保留正方形形狀。