CSSで高さを可変にして縦横比(アスペクト比)を維持する - ノンカフェインであなたにやさしい

CSSで高さを可変にして縦横比(アスペクト比)を維持する方法です。
縦横比(アスペクト比)1:1のサイズで幅に合わせて高さを可変にしたい時などに使えます。 paddingの特性を使って実現しています。さっそく使い方から。

CSSで高さを可変にして縦横比(アスペクト比)を維持する方法

まずはhtmlから

<div class="box">
  <div class="box__content">
    text text
  </div>
</div>

cssはこう

.box {
  height: auto;
  position: relative;
  width: 100%;
}

.box::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.box__content {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

CSSで高さを可変にして縦横比(アスペクト比)を維持する方法の解説

キーになるのは before の padding です。
paddingは%(パーセント)で指定した場合、親要素のwidthを基準に計算されます。
これを利用することで上記サンプルの padding-top の値を調整することでアスペクト比を指定して高さ可変のブロックを作ることができます。 https://www.w3.org/TR/CSS2/box.html#padding-properties

余談

アスペクト比とは

ウィキペディア様によると

アスペクト比（アスペクトひ、英語: aspect ratio）は、矩形における長辺と短辺の比率長辺:短辺（横縦比）または短辺:長辺（縦横比）で表されるが、ここでは長辺:短辺で統一する。なお、テレビやデジタルビデオ関係では長辺:短辺（横縦比）で表されることが多いが、映画界では伝統的に短辺:長辺（縦横比）で表されることが多い。

とのこと
縦横比だけじゃなくて横縦比もあるらしい。
テレビも映画も業界似たようなものだと思うんですけどね…
なんでアスペクト比の認識が違うんだろう？