html - 在 html 和 css 中缩放矩形

Question

我想制作一个具有特定比例的矩形 (div)。高宽比例必须为 30:50。矩形填充屏幕宽度的 40%。如果我调整屏幕大小，如果您牢记比例，我该如何更改高度？

HTML:

<div id="bg">   
</div>

CSS:

#bg {
    background-color: blue;
    width: 40%;
}

Answer 1

尝试使用 vw(视口(viewport)宽度)缩放它:

#bg {
  background-color: blue;
  width: 40vw;
  height: 66.67vw;
}

https://jsfiddle.net/gmsitter/9tpbq30x/1/