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

Der <ratio> CSS Datentyp beschreibt das proportionale Verhältnis zwischen zwei Werten. Er repräsentiert hauptsächlich das Seitenverhältnis, welches die Breite zur Höhe in Beziehung setzt. Zum Beispiel wird der <ratio> als Wert für die aspect-ratio Medienfunktion in @media Media-Queries, als aspect-ratio Größenfunktion in @container Container-Queries und als Wert für die CSS aspect-ratio Eigenschaft verwendet.

Syntax

Der <ratio>-Datentyp besteht aus einem <number>, gefolgt von einem Schrägstrich ('/', Unicode U+002F SOLIDUS) und einem zweiten <number>. Beide Zahlen müssen positiv sein. Leerzeichen vor und nach dem Schrägstrich sind optional. Die erste Zahl repräsentiert die Breite, während die zweite die Höhe darstellt. Zusätzlich ist auch ein einzelner <number> als Wert zulässig.

Zwei Verhältnisse werden durch Vergleichen der Quotienten ihrer numerischen Werte verglichen. Zum Beispiel ist 16/16 kleiner als 16/9, weil es zu 1 und das zweite zu 1,7 führt. Das bedeutet, dass das Seitenverhältnis eines hohen Bildschirms kleiner ist als das eines breiten Bildschirms, und Porträts kleinere Seitenverhältnisse haben als Landschaftsaufnahmen.

Häufige Seitenverhältnisse

Verhältnis Verwendung
4/3 oder 1.33333 Ein Rechteck, das drei Einheiten hoch und vier Einheiten breit ist Traditionelles TV-Format im zwanzigsten Jahrhundert.
16/9 oder 1.7777778 Ein Rechteck, das neun Einheiten hoch und sechzehn Einheiten breit ist Modernes "Widescreen"-TV-Format.
185/100 oder 1.85 Ein Rechteck, das 1 Einheit hoch und 1.85 Einheiten breit ist Das häufigste Filmformat seit den 1960er Jahren.
239/100 oder 2.39 Ein Rechteck, das 1 Einheit hoch und 2.39 Einheiten breit ist "Widescreen", anamorphen Filmformat.

Formaler Syntax

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

Beispiele

Verwendung in einer Media-Query

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

Verwendung in einer @container-Größenabfrage

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

Verwendung als Wert für eine CSS-Eigenschaft

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

Spezifikationen

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

Browser-Kompatibilität

Siehe auch