aspect-ratio

レイアウト・配置

要素のアスペクト比（縦横比）を指定するプロパティです。レスポンシブな画像や動画の表示に便利です。

構文

Syntax

aspect-ratio: <ratio> | auto

aspect-ratio: 16 / 9;

実行結果

aspect-ratio: 16 / 9 - 動画の標準比率

16:9 動画コンテナ

💡 YouTube、Netflix等の標準動画比率。レイアウトシフト防止に効果的

16:9のアスペクト比を維持

aspect-ratio: 1;

実行結果

aspect-ratio: 1 - 正方形（1:1）

アバター画像

💡 プロフィール画像、アイコン、正方形カードに最適

正方形（1:1）のアスペクト比

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

実行結果

aspect-ratio: 4 / 3 - 従来のテレビ比率

4:3 画像コンテナ

💡 従来TV、デジカメ画像。Instagram投稿画像でも使用

レスポンシブな動画コンテナ

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

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

Chrome 88+, Firefox 89+, Safari 15+