要素を常に正方形にしたい時ってあると思います。

でもwidthを%で指定してしまっているのでwidth: 100px; height: 100px;みたいに固定値での指定ができない...

そんな時のやり方を伝授します。

やり方

widthとheightを揃えたい要素に**padding-topでwidthと同じ%**を指定します。

サンプル

<div style="background: green; width: 30%; padding-top: 30%;">
  <div>ここに子要素が入ります</div>
</div>

これで%でwidthを指定していたとしてもheightをwidthに揃えることができます。