<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 die proportionale Beziehung zwischen zwei Werten. Er repräsentiert hauptsächlich das Seitenverhältnis, das 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, die aspect-ratio Größenfunktion in @container Container Queries 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 darstellt. Zusätzlich ist eine einzelne <number> als Wert zulässig.

Zwei Verhältnisse werden durch den Vergleich der numerischen Werte ihrer Quotienten verglichen. 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, dass das Seitenverhältnis eines hohen Bildschirms kleiner ist als das eines breiten Bildschirms, und Porträtbilder haben kleinere Seitenverhältnisse als Landschaftsbilder.

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 "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 (min-aspect-ratio: 16/9) {
  /* … */
}

Verwendung in einer @container Größenquery

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