CSS Reference

aspect-ratio

ボックスの推奨アスペクト比を指定する

aspect-ratio プロパティは、要素のボックスに対して推奨アスペクト比（幅と高さの比率）を設定します。設定されたアスペクト比は、要素の自動サイズの計算やレイアウト機能の一部で使用されます。

指定できる値は下記の通りです。

auto 置換要素（img 要素や video 要素のようにコンテンツが置換されて表示される要素）で、もともと自然なアスペクト比がある場合、その自然なアスペクト比が使用されます。
もし自然なアスペクト比がない場合、ボックスには特に優先されるアスペクト比はありません。アスペクト比に関連するサイズの計算は、常にコンテンツボックス（content-box）の寸法に基づいて行われます。
<ratio> 幅と高さの比率を、例えば 16/9 や 4/3 のように2つの数値で指定します。1つ目の数値は幅、2つ目の数値は高さです。高さが省略された場合、1 として扱われます。
指定されたアスペクト比は、ボックスの優先される比率として使われます。このとき、サイズの計算は box-sizing プロパティで指定されたボックスの寸法に基づきます。
なお、<ratio> の値が無効な比率（例えば片方の数値が 0 または 無限（∞）である場合など）は auto と同じになります。
auto && <ratio> auto 16/9 や 4/3 auto のように、auto と <ratio> を同時に指定した場合、置換要素に自然なアスペクト比があるならその比率が使われます。そうでない場合、指定した <ratio> の比率が優先されます。

aspect-ratioの仕様

初期値
  • auto
対象となる要素
  • インラインボックス、ルビーボックス、テーブルボックス以外のすべての要素
継承
  • なし

aspect-ratioのサンプルソース

aspect-ratio: auto;
aspect-ratio: 1/1;
aspect-ratio: 16; /* aspect-ratio: 16/1 と同じ意味 */
aspect-ratio: auto 3/4;

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome