CSSアスペクト比計算ツールとは？
このツールは、任意のピクセル単位の幅と高さを、16:9や4:3といったすっきりとした簡約アスペクト比に変換します。さらに、動画・iframe・画像ラッパーなどのレスポンシブコンテナを一定の比率に保つために使われる、おなじみのpadding-topパーセントも算出します。これは、CSSのaspect-ratioプロパティが広くサポートされる以前から定番だったテクニックです。
使い方
元の幅と高さをピクセル単位で入力するだけです。最大公約数（GCD）を使って比率を最小の整数まで簡約し、小数での比率（幅÷高さ）を表示し、さらにそのままCSSに貼り付けられるpadding-topパーセントを返します。
計算式の解説
まず、幅と高さの最大公約数（GCD）を求めます。両方の数値をGCDで割ると、簡約された比率が得られます。たとえば1920と1080のGCDは120なので、比率は16:9になります。padding-topのテクニックでは高さ ÷ 幅 × 100を用います。これは、パーセント指定のパディングが要素の幅を基準に計算されるためです。
計算例
1920×1080の画像の場合：GCD(1920, 1080) = 120。比率 = \(1920/120 : 1080/120\) = 16:9。小数 = \(1920 \div 1080 \approx 1.7778\)。padding-top = \(1080 \div 1920 \times 100\) = 56.25%。したがって、レスポンシブなラッパーにはpadding-top: 56.25%を使うことになります。
よくある質問
なぜaspect-ratioプロパティではなくpadding-topを使うのですか？ padding-topのハックは、非常に古いものを含めてあらゆるブラウザで動作します。新しいプロジェクトであれば、シンプルにaspect-ratio: 16 / 9;を使えば十分です。
パーセントの基準は幅と高さのどちらですか？ CSSでは縦方向のパディングのパーセント指定は常に親要素（containing block）の幅を基準とします。そのため、計算式が「高さ ÷ 幅」になるのです。
数値がきれいに割り切れない場合は？ どんな幅と高さでも有効な比率は得られますが、16:9のような一般的な名前とは一致しないことがあります。そうしたケースでは、小数で表した比率が役立ちます。
