如何保持自动调整大小的 Div 的宽高比？

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

问题陈述

创建 div元素即：

• 自动调整其大小以适合可用的屏幕空间
• 调整大小时保持其原始宽高比
• 适合指定的宽度和高度尺寸

解决方案

利用aspect-ratio属性，你可以达到想要的效果行为:

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: 
    /* this gradient is a proof that the ratio is maintained since the angle is fixed */
    linear-gradient(30deg,red 50%,transparent 50%),
    chocolate;
}

解释

• aspect-ratio: var(--r): 定义所需的宽高比 ( 960 像素： 540px)

• 宽度： 根据以下较小者计算宽度：

  • 可用窗口宽度的 90%
  • 960px
  • 窗口高度的 90% 乘以宽高比比例
• 线性渐变背景：演示背景图案如何在调整大小时保持其纵横比。

此解决方案允许您创建在指定的最大尺寸内自动调整大小并保持其原始纵横比的 div。

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