在html和css中缩放矩形

Question

我想用一个特定的比例做一个矩形( div)。高宽刻度必须是30:50.矩形填充宽度屏幕的40%。如果我调整我的屏幕大小，我如何改变高度，如果你把刻度放在心上？

HTML：

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

CSS：

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

Answer 1

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

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

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