html - 有没有办法像图像大小css一样设置空的div大小

Question

我想知道我是否可以像 css 中的图像一样设置 div 比率响应。例如，我有一个图像 (800px x 400px) 并设置 css 为 width:100%。当我使用桌面屏幕(宽度:1400 像素)时，图像将自动调整大小并获得屏幕全宽 => 图像大小(1400 像素 x 700 像素)。但是元素，我必须同时设置宽度和高度有没有办法设置空白宽度800px和高度400px，它会根据屏幕尺寸自动调整大小，并且仍然像图像一样保持比例。

谢谢

Answer 1

如果您的浏览器支持允许您，您可以使用视口(viewport)单位来传达 div 的纵横比。其余的将由浏览器处理。

您可以为不同尺寸定义类名。适用于 16:9 图像的是:

width: 100vw;
height: 77.78vw;

16/9 => 1.777777777777778;在这种情况下，对于 100% 的视口(viewport)宽度，您需要将 77.78% 的视口(viewport)高度应用于元素。

您可以为不同的宽高比预定义类或使用一些简单的 JS 来计算它。

Codepen(下同): https://codepen.io/Mchaov/pen/vJrgYa

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

div {
  margin: 0;
  padding: 0;
  border: 1px solid red;
}

.autoScale-16-9 {
  width: 100vw;
  height: 77.78vw;
}

<div class="autoScale-16-9">auto scale div</div>