Square div with fixed height using only CSS

Question

Everything is in the title !

How can I do to make my div's width equals to its fixed height using CSS only ?

HTML Code

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

CSS Code

.square{
    height:80%;
}

I know I can do the opposite (fixed width) using

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

because padding-top is relative the width of the container.

I also know I can do it using simple JQuery but don't want to use javascript.

Thanks,

Answer 1

Use vw unit :

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

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