有没有办法设置空的 div 大小，如图像大小 css

Question

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

谢谢

Answer 1

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

您可以为不同的大小定义类名。适用于 16:9 图像的一种是：

width: 100vw;
height: 77.78vw;

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

您可以为不同的纵横比预先定义类或使用一些简单的 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>