<ratio>

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 steht für die Breite, während die zweite für die Höhe steht. Zusätzlich ist ein einzelnes <number> als Wert erlaubt.

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

Übliche Seitenverhältnisse

Verhältnis		Verwendung
4/3 oder 1.33333		Traditionelles TV-Format im zwanzigsten Jahrhundert.
16/9 oder 1.7777778		Modernes "Widescreen"-TV-Format.
185/100 oder 1.85		Das häufigste Filmformat seit den 1960er Jahren.
239/100 oder 2.39		"Widescreen", anamorphes Filmformat.

Formale Syntax

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

Beispiele

Verwendung in einer Medienabfrage

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

Verwendung in einer @container Abfrage

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

Verwendung als CSS-Eigenschaftswert

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• aspect-ratio Medienmerkmal
• Verständnis von Seitenverhältnissen
• Leitfaden zu CSS-Containerabfragen
• Verwendung von Containergrößen- und Stilabfragen Leitfaden
• CSS Medienabfragen Modul
• CSS Containment Modul
• CSS Box-Sizing Modul
• CSS Werte und Einheiten Modul