當努力在視口中定位居中的方形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中文網其他相關文章！
