<ratio>

Baseline Widely available

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

<ratio> は CSS のデータ型で、幅と高さの比例関係を記述します。これは、メディアクエリー @media における aspect-ratio メディア特性の値として、コンテナクエリー @container における aspect-ratio サイズ特性の値として、 CSS aspect-ratio プロパティの値として使用します。

構文

<ratio> データ型は <number> に続くフォワードスラッシュ ('/', Unicode U+002F SOLIDUS) と 2 つ目の <number> から成ります。数字はどちらも正の値でなければなりません。スラッシュの前後のスペースは省略可能です。最初の数字は幅を表し、 2 つ目は高さを表します。また、値として単一の <number> を指定することもできます。

一般的なアスペクト比

比率 用例
4/3 または 1.33333 高さ 3 対幅 4 の矩形 20 世紀における伝統的な TV 画面の形状です。
16/9 または 1.7777778 高さ 16 対幅 9 の矩形 現代の「ワイド画面」の TV の形状です。
185/100 または 1.85 高さ 1 対幅 1.85 の矩形 1960 年代から用いられている最も一般的な映画スクリーンの形状です。
239/100 または 2.39 高さ 1 対幅 2.39 の矩形 「ワイドスクリーン」、アナモルフィックな映画スクリーンの形状です。

形式文法

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

例

メディアクエリーでの使用

css
@media screen and (min-aspect-ratio: 16/9) {
  /* … */
}

@container サイズクエリーでの使用

css
@container (aspect-ratio > 1) and (width < 20em) {
  /* … */
}

CSS プロパティ値としての使用

css
.square {
  aspect-ratio: 1 / 1;
}
.circle {
  aspect-ratio: 1;
  border-radius: 50%;
}
.portrait {
  aspect-ratio: 5 / 7;
}

仕様書

Specification
CSS Values and Units Module Level 4
# ratio-value

ブラウザーの互換性

BCD tables only load in the browser

関連情報