在自動調整大小的Div 元素中保留寬高比
當Div 元素需要適應不同的螢幕尺寸並同時保持特定的長寬比。這可以透過使用寬高比 CSS 屬性以及寬度和高度屬性的直覺組合來實現。
為了優雅地處理寬度和高度的變化，您可以利用寬高比計算 --r = 寬度 / 高度。以下是如何在CSS 中實現它：
body {
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: gray;
}
.stage {
--r: 960 / 540;
aspect-ratio: var(--r);
width: min(90%, min(960px, 90vh * var(--r)));
display: flex;
justify-content: center;
align-items: center;
background:
linear-gradient(30deg, red 50%, transparent 50%),
chocolate;
}在此範例中：
這樣的方法可確保 div 元素自動調整大小，同時保持所需的寬高比，適應寬度和高度的變化。
以上是如何使用 CSS 自動調整 Div 元素大小來保留寬高比？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
