在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/