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

2019年7月28日 238次阅读

我希望我的元素成为一个正方形.我希望这个元素的边长为屏幕/窗口高度的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%].*/

}

最佳答案 您可以使用视口百分比长度来获得所需的效果.

vh单位长度基于视口/屏幕高度的1％,我认为这是您所需要的.

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

您可以选择其中一个,只需使用相同长度的单位来表示宽度和高度.

最后,您还可以尝试使用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>
点赞