CSSでbox大きさを%で指定すると、windowを拡大・縮小した時に縦横比がかわって形が崩れてしまう場合があります。でもpxで指定するのはいやだ。
そんなときに役に立つ方法を教えてもらったのでメモしておきます。

padding-topをつかって縦横比を保つ

padding-topを%で指定した時、基準となる長さは親要素のwidthです。

縦横比を崩したくない時はまずwidthとpadding-topを指定したboxを用意し、そのなかで作業を行えばよいです。

親boxの高さをheightで指定した時

index.css

    hoge{
      position: relative;
      width: 40%;
      height: 40%;
      background-color: purple;
    }

windowの高さを変更するとboxのかたちが少し変わっていますね。

index.css

    hoge{
      position: relative;
      width: 40%;
      padding-top: 40%;
      background-color: purple;
    }

高さを変えても正方形が保たれていますね。
このように、windowの高さを変更しても縦横比が変わらないので、
このなかで作業をすれば高さの変更によるデザインの崩れが起きずに中身の拡大・縮小をすることができます。
子要素にはpositionをabsoluteに設定しておくのを忘れずに！