<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, das Breite zu Höhe in Beziehung setzt. Zum Beispiel wird <ratio> als Wert für die aspect-ratio Medienfeature in @media Media Queries, das aspect-ratio Größenfeature in @container Container Queries und als Wert für die CSS-aspect-ratio-Eigenschaft verwendet.

Syntax

Der <ratio>-Datentyp ist ein <number> gefolgt von einem Schrägstrich ('/', Unicode U+002F SOLIDUS) und einer 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 repräsentiert. Zusätzlich ist ein einzelner <number> als Wert zulässig.

Zwei Verhältnisse werden verglichen, indem die numerischen Werte der Quotienten verglichen werden. Zum Beispiel ist 16/16 kleiner als 16/9, da es sich zu 1 auflöst, während das zweite sich zu 1,7 auflöst. Das bedeutet, das Seitenverhältnis eines hohen Bildschirms ist kleiner als das eines breiten Bildschirms, und Porträtbilder haben kleinere Seitenverhältnisse als Landschaftsbilder.

Häufige Seitenverhältnisse

Verhältnis Nutzung
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", anamorphisches Filmformat.

Formale Syntax

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

Beispiele

Verwendung in einer Media Query

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

Verwendung in einer @container-Größenabfrage

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

Verwendung als CSS-Eigenschaftswert

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