Hogy lehet megadni css-ben, hogy a width-el mindig legyen egyenlő a height?

Pl. a szélességhez méred mindkettőt:

#a {

background: red;

width: 90vw;

height: 90vw;

}

[link]

----- HTML -----

<div class="square">

<div class="inner">

Szöveg

</div>

</div>

<div class="square half">

<div class="inner">

Szöveg

</div>

</div>

----- CSS -----

.square {

position: relative;

width: 200px;

margin: 20px auto;

background: #ccc;

}

.square:after {

display: block;

content: '';

padding-bottom: 100%;

}

.square.half:after {

padding-bottom: 50%;

}

.square .inner {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

padding: 20px;

}