aspect-ratio

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

aspect-ratio は CSS のプロパティで、ボックスの推奨アスペクト比を設定します。これは auto の大きさを計算したり、他のレイアウト関数で使用されたりします。

css
aspect-ratio: 1 / 1;
aspect-ratio: 1;

/* グローバル値 */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: unset;

試してみましょう

値

auto

内在的なアスペクト比がある置換要素の場合は、そのアスペクト比を使用し、それ以外の場合はボックスに推奨アスペクト比が設定されません。内在的なアスペクト比を使用して寸法を計算する際には、常にコンテンツボックスの寸法に対して行われます。

<ratio>

ボックスの推奨アスペクト比は、width / height で指定された比率です。height とそれに先立つスラッシュ文字が省略された場合、height の既定値は 1 です。推奨アスペクト比を含む寸法の計算では、box-sizing で指定されたボックスの寸法で行われます。

公式定義

初期値auto
適用対象インラインボックスおよび内部のルビまたは表ボックスを除くすべての要素
継承なし
計算値指定通り
アニメーションの種類計算値の型による

形式文法

aspect-ratio = 
  auto     ||
  <ratio>  

<ratio> = 
  <number [0,∞]> [ / <number [0,∞]> ]?

例

aspect-ratio の値の例

css
aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;
aspect-ratio: 0.5;

幅と高さの aspect-ratio への対応付け

ブラウザーは、内部の aspect-ratio プロパティを追加しました。これは置換要素や、 width と height 属性を受け入れるその他の関連要素に適用されます。これは、ブラウザーの内部 UA スタイルシートに現れます。

Firefox では、内部のスタイルシートルールはこのようになっています。

css
img,
input[type="image"],
video,
embed,
iframe,
marquee,
object,
table {
  aspect-ratio: attr(width) / attr(height);
}

この機能については画像に高さと幅を設定することが再び重要に (英語) で詳しく読むことができます。

仕様書

Specification
CSS Box Sizing Module Level 4
# aspect-ratio

ブラウザーの互換性

BCD tables only load in the browser

関連情報