Aspect ratio

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

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

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 repräsentiert und die Höhe 1 ist.

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

In SVG wird das Aspect Ratio 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 Aspect Ratio des SVG festlegen.

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

In JavaScript APIs liefert das Abfragen eines Aspect Ratios eine Gleitkommazahl in doppelter Genauigkeit, die die Breite geteilt durch die Höhe darstellt. Sie können JavaScript auch verwenden, um das Aspect Ratio eines Elements festzulegen. Beispielsweise würde das Festlegen einer Aspect Ratio-Beschränkung für ein 1920x1080 Video unter Verwendung der MediaStreamTrack oder MediaTrackSettings Wörterbücher durch die aspectRatio Eigenschaft als 16/9 oder 1920/1080 berechnet, was 1.7777777778 ist:

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

myTrack.applyConstraints(constraints);