如何根據寬度和高度保持 Div 的長寬比？

根據寬度和高度保持縱橫比

當努力在視口中定位居中的方形div 時，出現了問題：如何有效地保持其縱橫比同時考慮寬度和高度尺寸？

2022 年 CSS 縱橫比屬性的出現為此挑戰提供了全面的解決方案。此屬性使開發人員能夠維持相對於視窗大小或父元素的任何縱橫比。

為了實現我們根據視口尺寸維持縱橫比的目標，可以使用以下CSS 程式碼：

<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 和1:19。利用這些長寬比的 div 元素將自動調整其尺寸，以在視窗內保持這些比例，從而確保視覺外觀一致，無論視窗大小或方向如何。

以上是如何根據寬度和高度保持 Div 的長寬比？的詳細內容。更多資訊請關注PHP中文網其他相關文章！