Масштабировать прямоугольник в 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/