Seitenverhältnis

Ein Seitenverhältnis ist das proportionale Verhältnis zwischen der Breite und Höhe eines Elements oder eines viewports. Es wird als ein <ratio> aus zwei Zahlen dargestellt.

Ein Seitenverhältnis, sei es ein inhärentes wie bei Bildern und Videos oder ob es extrinsisch festgelegt ist, bewahrt die beabsichtigten Proportionen eines Elements. Sie können auch das Seitenverhältnis eines Elements oder Viewports abfragen, was bei der Entwicklung flexibler Komponenten und Layouts nützlich ist.

In CSS wird der Datentyp <ratio> als width / height geschrieben (z. B. 1 / 1 für ein Quadrat, 16 / 9 für Breitbild) oder als einzelne Zahl, wobei die Zahl die Breite darstellt und die Höhe 1 ist.

.wideBox {
  aspect-ratio: 5 / 2;
}
.tallBox {
  aspect-ratio: 0.25;
}

In SVG wird das Seitenverhältnis durch das vierwertige viewBox-Attribut definiert. Die ersten beiden Werte sind die kleinsten X- und Y-Ursprungskoordinaten, die das SVG haben kann, und die zweiten beiden Werte sind die Breite und Höhe, die das Seitenverhältnis des SVG festlegen.

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"></svg>

In JavaScript-APIs gibt eine Abfrage eines Seitenverhältnisses eine Gleitkommazahl mit doppelter Genauigkeit zurück, die die Breite geteilt durch die Höhe darstellt. Sie können auch JavaScript verwenden, um das Seitenverhältnis eines Elements festzulegen. Zum Beispiel würde das Festlegen einer Seitenverhältnisbedingung für ein 1920x1080-Video mithilfe der MediaStreamTrack oder MediaTrackSettings-Diktionär aspectRatio-Eigenschaft als 16/9 oder 1920/1080 berechnet werden, was 1.7777777778 ergibt:

const constraints = {
  width: 1920,
  height: 1080,
  aspectRatio: 1.777777778,
};

myTrack.applyConstraints(constraints);