Seitenverhältnis

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

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

In CSS wird der <ratio> Datentyp 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-Ursprungskoodinaten, 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 ergibt das Abfragen eines Seitenverhältnisses eine Gleitkommazahl mit doppelter Genauigkeit, die die Breite geteilt durch die Höhe darstellt. Sie können auch JavaScript verwenden, um das Seitenverhältnis eines Elements festzulegen. Zum Beispiel, das Festlegen einer Seitenverhältnis-Einschränkung für ein 1920x1080 Video mithilfe der MediaStreamTrack oder der MediaTrackSettings Dictionarys aspectRatio Eigenschaft würde als 16/9 oder 1920/1080 berechnet werden, was 1.7777777778 ist:

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

myTrack.applyConstraints(constraints);