aspect-ratio

レイアウト・配置

要素のアスペクト比（縦横比）を指定するプロパティです。16/9や1/1のように指定し、レスポンシブな画像や動画の表示で縦横比を維持します。padding-topハックの代替として、より直感的な実装が可能です。

構文

Syntax
aspect-ratio: <ratio> | auto

コード例

例 1

aspect-ratio: 16 / 9;
実行結果
aspect-ratio: 16 / 9 - 動画の標準比率
16:9 動画コンテナ
💡 YouTube、Netflix等の標準動画比率。レイアウトシフト防止に効果的

16:9の横長比率

例 2

aspect-ratio: 1 / 1;
実行結果
aspect-ratio: 1 - 正方形（1:1）
アバター画像
💡 プロフィール画像、アイコン、正方形カードに最適

正方形

例 3

aspect-ratio: 4 / 3;
実行結果
aspect-ratio: 4 / 3 - 従来のテレビ比率
4:3 画像コンテナ
💡 従来TV、デジカメ画像。Instagram投稿画像でも使用

4:3の比率

例 4

aspect-ratio: 3 / 4;
実行結果
レスポンシブ動画 - width: 100% + aspect-ratio: 16/9
レスポンシブ動画
画面幅に応じて拡縮
💡 iframe動画の埋め込みでよく使用。高さが自動計算される

3:4の縦長比率

例 5

aspect-ratio: 21 / 9;

21:9のワイド比率

例 6

aspect-ratio: 9 / 16;

9:16のモバイル縦長比率

💡 TIPS

画像やiframeの埋め込みで、レイアウトシフトを防ぐのに効果的。

⚠️ よくある間違い

widthまたはheightのどちらかは指定する必要がある。

関連プロパティ

ブラウザサポート

Chrome 88+, Firefox 89+, Safari 15+