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

Syntax

Der <ratio> Datentyp ist eine <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 darstellt. Zusätzlich ist ein einzelner <number> als Wert zulässig.

Zwei Verhältnisse werden anhand der numerischen Werte der Quotienten verglichen. Zum Beispiel ist 16/16 kleiner als 16/9, da es zu 1 aufgelöst wird, während das zweite zu 1,7 aufgelöst wird. Das bedeutet, dass das Seitenverhältnis eines hohen Bildschirms kleiner ist als das eines breiten Bildschirms und Hochformat-Bilder kleinere Seitenverhältnisse als Querformat-Bilder haben.

Übliche 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 "Breitbild"-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 "Breitbild", anamorphes 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