<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
プロパティの値として使用します。
構文
一般的なアスペクト比
比率 | 用例 | |
---|---|---|
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 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
aspect-ratio
メディア記述子- アスペクト比の理解
- CSS コンテナークエリーガイド
- コンテナーのサイズおよびスタイルクエリーの使用ガイド
- CSS メディアクエリーモジュール
- CSS 拘束モジュール
- CSS ボックスサイズモジュール
- CSS 値と単位モジュール