如何在CSS中将元素的宽度设置为等于高度的10％？

Question

我希望我的元素成为正方形。 我希望此元素正方形的边长为屏幕/窗口高度的10％。 但是，我不知道该怎么做。 这是我的代码：

.Element {

width: /*How can I make the width equal to: [height: 10%]?*/;
height: 10%;
/*I wanted the element to be a square with a side length of [height: 10%].*/

}

Answer 1

您可以使用视口百分比长度来获得所需的效果。

vh单位长度基于视口/屏幕高度的1％，我认为这是您拥有的视口/屏幕高度的1％。

或者， vw单位长度基于视口/屏幕宽度的1％。

您可以选择任何一个， width和height都使用相同的长度单位。

最后，您还可以尝试使用vb和vi长度单位。

请参阅： https ： //developer.mozilla.org/en-US/docs/Web/CSS/length

 .makeSquare { background-color: yellow; width: 10vh; height: 10vh; } 

 <div class="makeSquare"></div> <p>This is a square.</p> 

Answer 2

这应该工作

  .Element {
     width: 20vw;
     height: 20vw;
    }