如何使用 CSS 自动调整 Div 元素大小来保留宽高比？

在自动调整大小的 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;
}

在此示例中：

• --r 是一个自定义 CSS 变量，它将宽高比存储为小数。
• aspect-ratio 属性设置计算的长宽比。
• width 属性计算 90% 的可用空间、960px 和 90% 的视口高度乘以长宽比之间的最小值。这可确保宽度与高度保持比例。
• 高度由纵横比属性结合计算出的宽度确定。

这样的方法可确保 div 元素自动调整大小，同时保持所需的宽高比，适应宽度和高度的变化。

以上是如何使用 CSS 自动调整 Div 元素大小来保留宽高比？的详细内容。更多信息请关注PHP中文网其他相关文章！