<ratio>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

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

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

比率		用例
`4/3` または `1.33333`		20 世紀における伝統的な TV 画面の形状です。
`16/9` または `1.7777778`		現代の「ワイド画面」の TV の形状です。
`185/100` または `1.85`		1960 年代から用いられている最も一般的な映画スクリーンの形状です。
`239/100` または `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

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年7月21日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content

<ratio>

構文

一般的なアスペクト比

形式文法

例

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

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

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

仕様書

ブラウザーの互換性

関連情報

Help improve MDN