在html和css中缩放一个矩形 [英] Scale a rectangle in html and css
本文介绍了在html和css中缩放一个矩形的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想制作一个具有特定比例的矩形(div)。高宽标尺必须是30:50。矩形填充宽度屏幕的40%。如果我调整屏幕大小,如果记住这个比例,我该如何改变高度?
HTML:
< div id =bg>
< / div>
CSS:
#bg {
background-color:blue;
宽度:40%;
}
解决方案
c $ c> vw (视口宽度):
#bg {
background-颜色:蓝色;
宽度:40vw;
身高:66.67vw;
}
https://jsfiddle.net/gmsitter/9tpbq30x/1/
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%;
}
解决方案
Try scaling it using vw
(viewport width):
#bg {
background-color: blue;
width: 40vw;
height: 66.67vw;
}
https://jsfiddle.net/gmsitter/9tpbq30x/1/
这篇关于在html和css中缩放一个矩形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文