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

Question

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

谢谢

Answer 1

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

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

width: 100vw;
height: 77.78vw;

16/9=>1.7777777777777777777778；在本例中，对于100%的视口宽度，您需要将77.78%的视口高度应用于元素。

您可以为不同的纵横比预定义类，或者使用一些简单的JS来计算这一点。

Codepen（下同）：https://Codepen.io/mchaov/pen/vjrgya

null

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>