Scale a rectangle in html and css

问题:

I want to make a rectangle (a div) with a specific scale. The height-width scale has to be 30:50. The rectangle fills 40% of the width-screen. If I resize my screen, how can I change the height if you keep the scale in mind?

HTML:

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

CSS:

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

回答1:

Try scaling it using vw (viewport width):

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

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