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

Der <ratio> CSS Datentyp beschreibt das proportionale Verhältnis zwischen Breite und Höhe. Er wird als Wert für das aspect-ratio Medienmerkmal in @media Medienanfragen, das aspect-ratio Größenmerkmal in @container Container-Abfragen und als 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 repräsentiert. Zusätzlich ist ein einzelner <number> als Wert zulässig.

Häufige Seitenverhältnisse

Ratio 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 gebräuchlichste 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 Medienabfrage

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

BCD tables only load in the browser

Siehe auch