我想知道我是否可以设置div比率响应像一个图像在CSS。例如，我有一个图像(800px x400px)，并将css设置为宽度：100%。当我使用桌面屏幕(widht:1400px)时，图像将自动调整大小，得到屏幕全宽=>图像大小(1400px x 700px)。但是元素，我必须同时设置宽度和高度有办法设置空宽度800px，高度400px，它将根据屏幕大小自动调整大小，并且它仍然像图像一样保持比例。
谢谢
如果您的浏览器支持允许，您可以使用视口单元来传达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>