Question

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

谢谢

Answer 1

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

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

width: 100vw;
height: 77.78vw;

16/9 =＆gt; 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>

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

1 个答案: