html - 仅使用 CSS 固定高度的方形 div

Question

一切都在标题中!

如何仅使用 CSS 使我的 div 的宽度等于其固定高度？

HTML代码

<div class="container">
    <div class="square"></div>
</div>

CSS 代码

.square{
    height:80%;
}

我知道我可以使用相反的方法(固定宽度)

.square{
   width : 20%;
   padding-top:20%
}

因为 padding-top 是相对于容器的宽度。

我也知道我可以使用简单的 JQuery 但不想使用 javascript。

谢谢，

Answer 1

使用大众单位:

.square {
  background: #000;
  width: 50vw;
  height: 50vw;
}

<div class="square"></div>