如何在可變視口中保留元素的縱橫比：「縱橫比」屬性的深入指南？

確保視口中的縱橫比保持

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

利用寬高比屬性

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

範例實作

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

<code class="html"><div class="ar-1-1">Aspect ratio 1:1</div>
<div class="ar-1-19">Aspect ratio 1:19</div></code>

<code class="css">.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;
}</code>

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

以上是如何在可變視口中保留元素的縱橫比：「縱橫比」屬性的深入指南？的詳細內容。更多資訊請關注PHP中文網其他相關文章！