<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.

* Some parts of this feature may have varying levels of support.

<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 の矩形 「ワイドスクリーン」、アナモルフィックな映画スクリーンの形状です。

形式文法

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

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
<ratio>
Accepts a single <number> as a value.
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

関連情報