aspect-ratio property
従来、アスペクト比を維持するには padding-top のパーセンテージハック（例: padding-top: 56.25% で 16:9）が必要だった。aspect-ratio プロパティにより、宣言的かつ直感的にアスペクト比を指定できる。レスポンシブな動画埋め込みやサムネイル画像の統一サイズに活用できる。
概要
従来、アスペクト比を維持するには padding-top のパーセンテージハック（例: padding-top: 56.25% で 16:9）が必要だった。aspect-ratio プロパティにより、宣言的かつ直感的にアスペクト比を指定できる。レスポンシブな動画埋め込みやサムネイル画像の統一サイズに活用できる。
対応ブラウザ
デスクトップ
Chrome 88+
Edge 88+
Safari 15+
Firefox 89+
モバイル
Chrome Android 88+
Safari iOS 15+
Firefox Android 89+
基本構文
CSS
.video-wrapper {
aspect-ratio: 16 / 9;
width: 100%;
}
.avatar {
aspect-ratio: 1;
width: 48px;
border-radius: 50%;
object-fit: cover;
}実務での使いどころ
-
レスポンシブ動画コンテナ
iframe や video 要素のラッパーに 16:9 のアスペクト比を設定し、幅に応じて高さが自動計算される。
-
サムネイルグリッドの統一
異なるサイズの画像を同一アスペクト比のコンテナに収め、グリッドの整列感を維持する。
注意点
- コンテンツが指定したアスペクト比に収まらない場合、要素が拡張される（overflow で制御可能）。
- min-height / max-height との組み合わせでは、aspect-ratio が上書きされる場合がある。
フォールバック戦略
CSS
/* aspect-ratio 非対応環境向けフォールバック (16:9) */
.video-wrapper {
position: relative;
padding-top: 56.25%;
}
.video-wrapper > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}アクセシビリティ
- アスペクト比の維持はレイアウトシフト（CLS）の抑制にも寄与し、ユーザー体験の向上につながる。