在 html 和 css 中缩放矩形
Scale a rectangle in html and css
我想制作一个具有特定比例的矩形 (a div)。高宽比例必须为 30:50。矩形填充屏幕宽度的 40%。如果我调整屏幕大小,如果您牢记比例,我该如何更改高度?
HTML:
<div id="bg">
</div>
CSS:
#bg {
background-color: blue;
width: 40%;
}
尝试使用 vw
(视口宽度)缩放它:
#bg {
background-color: blue;
width: 40vw;
height: 66.67vw;
}
我想制作一个具有特定比例的矩形 (a div)。高宽比例必须为 30:50。矩形填充屏幕宽度的 40%。如果我调整屏幕大小,如果您牢记比例,我该如何更改高度?
HTML:
<div id="bg">
</div>
CSS:
#bg {
background-color: blue;
width: 40%;
}
尝试使用 vw
(视口宽度)缩放它:
#bg {
background-color: blue;
width: 40vw;
height: 66.67vw;
}