如何在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

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

solver_mode: GPU单位长度基于视口/屏幕高度的1％，我认为这是你的目标。

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

您可以选择其中之一，只需对vw和width使用相同的长度单位。

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

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

vi

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

Answer 2

这应该有效

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