在html和css中缩放一个矩形 [英] Scale a rectangle in html and 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屋！