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 のサイズやその他のレイアウト機能の計算に使用されます。

aspect-ratio が何らかの効果を持つためには、ボックスのサイズの少なくとも 1 つが自動である必要があります。幅も高さも自動サイズでない場合、指定されたアスペクト比はボックスの推奨サイズに何の影響も持ちません。

試してみましょう

構文

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

/* 置換要素では 'auto' になる */
aspect-ratio: auto 3/4;
aspect-ratio: 9/6 auto;

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

このプロパティは、キーワード auto または <ratio> のいずれか、または両方で指定します。両方が指定され、要素が置換要素（<img> など）である場合、コンテンツが読み込まれるまでは指定された比率が使用されます。コンテンツが読み込まれた後は、 auto の値が適用され、読み込まれたコンテンツの内在的なアスペクト比が使用されます。

要素が置換要素でない場合は、指定された ratio が使用されます。

値

auto

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

<ratio>

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

auto && <ratio>

auto と <ratio> が両方指定された場合、要素が <img> 要素のように内在的な縦横比を持つ置換要素である場合は auto が使用されます。 それ以外の場合は、指定された width / height の比率が好ましい縦横比として使用されます。

公式定義

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

形式文法

aspect-ratio = 
  auto     ||
  <ratio>  

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

例

固定の幅に対する aspect-ratio の効果の実験

この例では、<div> 要素の幅は 100px に、高さは auto に設定されています。 幅の値が固定されているため、aspect-ratio プロパティは指定された幅と高さの比率を維持するために <div> 要素の高さのみに影響します。

css
div {
  width: 100px;
  height: auto;
}
div:nth-child(1) {
  aspect-ratio: 1/1;
}
div:nth-child(2) {
  aspect-ratio: 0.5;
}
div:nth-child(3) {
  aspect-ratio: 1;
}
div:nth-child(4) {
  aspect-ratio: 1/0.5;
}
div:nth-child(5) {
  aspect-ratio: 16/9;
}

自然なアスペクト比への代替

この例では、2つの <img> 要素を使用しています。最初の要素には、画像ファイルを指定する src 属性が設定されていません。

html
<img src="" /> <img src="plumeria.jpg" />

次のコードでは、優先するアスペクト比として 3/2 を、代替として auto を設定しています。

css
img {
  display: inline;
  width: 200px;
  border: 2px dashed red;
  background-color: lime;
  vertical-align: top;

  aspect-ratio: 3/2 auto;
}

置換コンテンツではない最初の画像は、縦横比が 3/2 のままですが、コンテンツが読み込まれた後の 2 番目の画像は、画像の自然な縦横比を使用していることに注目してください。

仕様書

Specification
CSS Box Sizing Module Level 4
# aspect-ratio

ブラウザーの互換性

BCD tables only load in the browser

関連情報