在自动调整大小的 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中文网其他相关文章！
