index.md

title	slug	l10n
<ratio>	Web/CSS/ratio	sourceCommit 2ef2c905a7322f5a533cf7c96ec5a337fc614359

{{CSSRef}}

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

構文

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

一般的なアスペクト比

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

形式文法

{{csssyntax}}

例

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

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

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

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

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

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

仕様書

{{Specifications}}

ブラウザーの互換性

{{Compat}}

関連情報

• aspect-ratio メディア記述子
• アスペクト比の理解
• CSS コンテナークエリーガイド
• コンテナーのサイズおよびスタイルクエリーの使用ガイド
• CSS メディアクエリーモジュール
• CSS 拘束モジュール
• CSS ボックスサイズモジュール
• CSS 値と単位モジュール