如何在可调整大小、居中的 Div 元素中保持宽高比？

在自动调整大小的 Div 元素中保持宽高比

创建保持在屏幕中央的可调整大小的 div 元素时，重要的是要确保无论窗口大小如何变化，其纵横比都保持不变。这可以使用 CSS 技术来实现。

CSS 解决方案：

aspect-ratio 属性提供了一个简单的解决方案，可以在调整 div 元素大小时保持宽高比。以下 CSS 代码演示了如何实现此目的：

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
}

.stage {
  --r: 960 / 540;  // Define the desired aspect ratio (width / height)

  aspect-ratio: var(--r);  // Set the aspect ratio
  width:min(90%, min(960px, 90vh*(var(--r))));  // Set the maximum width and height while preserving ratio

  display: flex;
  justify-content: center;
  align-items: center;

  background: 
    linear-gradient(30deg,red 50%,transparent 50%),  // Add a gradient to visualize the preserved aspect ratio
    chocolate;
}

说明：

• aspect-ratio 属性建立元素所需的长宽比，这是根据初始宽度和高度值（960px 和 540px，

• width 属性确保元素的宽度保持在指定的约束范围内：

  • 最大可用宽度的 90%
  • 最大 960px
  • 保持与可用高度相关的纵横比的宽度 (90vh乘以 var(--r))
• 添加背景渐变是为了直观地证明纵横比保持不变，因为无论元素的角度如何变化，渐变的角度都保持不变尺寸。

结果：

以上 CSS 代码结果在保持屏幕居中的 div 元素中，保持其所需的宽高比，并调整大小以适应可用的窗口空间。该解决方案可以有效地调整元素的宽度和高度。

以上是如何在可调整大小、居中的 Div 元素中保持宽高比？的详细内容。更多信息请关注PHP中文网其他相关文章！