HTML と CSS だけで要素のアスペクト比を固定する

まず結果を見たい人向け

ソースコードとサンプル

作りたいもの (要件)

• 要素のアスペクト比を指定したい (具体的な px 値を使わずに).

実装解説

HTML は非常にシンプル. ポイントは, アスペクト比を固定した要素 (この HTML では id が "ratio_16-9" の <div> 要素) に小要素は 1 つのみ入れること.

index.html

<div id="ratio_16-9">
  {なにか要素一つ (例: YouTube 動画埋め込み)}
</div>

まず <div id="ratio_16-9"> に position と overflow を設定.
この時点では子要素がないため高さが 0 である.

style.css

* {
  box-sizing: border-box;
}
 #ratio_16-9 {
  position: relative; /* relative は通常の位置を基準にする. */
  overflow: hidden; /* はみ出した部分を非表示にする. */
}

次に :before 疑似要素を使って 16:9 の空白の要素を挿入する. padding-top (padding-bottom でも良い) で比率を指定すると要素の横幅を基準とするため, 56.25% とすれば 16:9 となる. 75% とすれば 4:3 もできる.
この :before 疑似要素によって <div id="ratio_16-9"> は, 高さが横幅の 56.25% である (つまりアスペクト比 16:9 の) 長方形となる.

#ratio_16-9:before {
  content: '';
  display: block;
  width: 100%;
  padding-top: 56.25%;
}

最後に, 表示させたい中身のスタイルを設定する. 16:9 になった <div id="ratio_16-9"> の幅・高さ一杯に中身を表示する.
ここで position: absolute; top: 0; left: 0; とすることで親要素である <div id="ratio_16-9"> の左上を原点として扱える.

style.css

#ratio_16-9 > * {
  position: absolute; /* absolute は祖先要素のうち position が static (初期値) 以外に設定されている要素の左上を基準にする. この場合親要素の h1 の左上が基準となる. */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}