縦横比固定ボックス（16:9 等）
ボックスの 縦横比を固定 するレイアウトで、CSS の aspect-ratio プロパティ一つで実現します。サンプルでは aspect-ratio:16/9 4/3 1/1 の三つを並べ、幅が変わっても指定した比率のまま高さが自動計算されます。
解説
ボックスの縦横比を固定するレイアウトで、CSS の aspect-ratio プロパティ一つで実現します。サンプルでは aspect-ratio:16/9 4/3 1/1 の三つを並べ、幅が変わっても指定した比率のまま高さが自動計算されます。かつてパディングを使った擬似的な手法が必要だった処理が、いまは一行で書けるようになりました。中の要素は Grid の place-items:center で中央に配置しています。
必須になる場面
- YouTube など埋め込み動画の枠（16:9）
- レスポンシブなヒーロー画像やバナー
- SNS のサムネイルや正方形の画像カード
比率は 16/9 を 3/2 や 21/9 などに書き換えるだけで変更でき、用途に合わせて自由です。動画の iframe を入れる場合は親に aspect-ratio を当て、子の iframe を width:100%;height:100% にすると比率を保ったまま伸縮します。aspect-ratio は現行ブラウザで広く使えますが、古い環境を考慮するならパディング方式のフォールバックを用意すると安心です。
使用例・適したシーン
- 商品一覧表示
- ブログ記事カード一覧
- メンバー一覧
よくある質問
好きな縦横比に変えられますか
変えられます。aspect-ratio:16/9 の値を 4/3 や 1/1、3/2 など任意の比率に書き換えるだけです。スラッシュの左右が幅と高さの比を表します。
YouTube などの埋め込み動画に使えますか
使えます。親要素に aspect-ratio:16/9 を指定し、中の iframe を width:100%・height:100% にすれば、画面幅が変わっても 16:9 を保ったまま動画が伸縮します。