Die CSS-Eigenschaft „aspect-ratio“

Die CSS-Eigenschaft, mit der Abstände in responsiven Layouts beibehalten werden.

Una Kravets

Hinweis : Zusammenfassung: Ein einheitliches Verhältnis zwischen Breite und Höhe, das als Seitenverhältnis bezeichnet wird, ist für responsives Webdesign und zur Vermeidung von kumulativen Layoutverschiebungen von entscheidender Bedeutung. Mit der neuen aspect-ratio-Eigenschaft, die in Chromium 88, Firefox 87 und Safari Technology Preview 118 eingeführt wird, ist das jetzt einfacher.

Seitenverhältnis

Browser Support

• 88
• 88
• 89
• 15

Source

Das Seitenverhältnis wird am häufigsten als zwei Ganzzahlen und ein Doppelpunkt in den Dimensionen „Breite:Höhe“ oder „x:y“ ausgedrückt. Die gängigsten Seitenverhältnisse für Fotos sind 4:3 und 3:2, während Videos und neuere Kameras für Verbraucher in der Regel ein Seitenverhältnis von 16:9 haben.

Zwei Bilder mit demselben Seitenverhältnis. Das eine Bild hat die Abmessungen 634 × 951 Pixel, das andere 200 × 300 Pixel. Beide haben ein Seitenverhältnis von 2:3.

Mit dem Aufkommen von responsivem Design ist die Beibehaltung des Seitenverhältnisses für Webentwickler immer wichtiger geworden, insbesondere da sich Bildabmessungen und Elementgrößen je nach verfügbarem Platz unterscheiden.

Hier einige Beispiele, bei denen das Beibehalten des Seitenverhältnisses wichtig ist:

• Responsive iFrames erstellen, die 100% der Breite des übergeordneten Elements einnehmen und deren Höhe ein bestimmtes Verhältnis zum Darstellungsbereich beibehalten soll
• Erstellen von intrinsischen Platzhaltercontainern für Bilder, Videos und Einbettungen, um ein erneutes Layout zu verhindern, wenn die Elemente geladen werden und Platz einnehmen
• Einheitlichen, responsiven Bereich für interaktive Datenvisualisierungen oder SVG-Animationen erstellen
• Einheitlichen, responsiven Abstand für Komponenten mit mehreren Elementen wie Karten oder Kalenderdaten erstellen
• Einheitlichen, responsiven Platz für mehrere Bilder mit unterschiedlichen Abmessungen schaffen (kann zusammen mit object-fit verwendet werden)

„object-fit“

Wenn Sie ein Seitenverhältnis definieren, können wir die Größe von Media in einem responsiven Kontext besser anpassen. Ein weiteres Tool in dieser Kategorie ist das Attribut object-fit, mit dem Nutzer beschreiben können, wie ein Objekt (z. B. ein Bild) in einem Block diesen Block ausfüllen soll:

Verschiedene object-fit-Werte werden präsentiert. Demo auf Codepen ansehen

Die Werte initial und fill passen das Bild neu an, damit es den Bereich ausfüllt. In unserem Beispiel wird das Bild dadurch zusammengedrückt und verschwommen, da die Pixel neu angepasst werden. Nicht ideal. Bei object-fit: cover wird die kleinste Abmessung des Bildes verwendet, um den Bereich auszufüllen. Das Bild wird entsprechend dieser Abmessung zugeschnitten. An der unteren Grenze wird „herangezoomt“. Mit object-fit: contain wird dafür gesorgt, dass das gesamte Bild immer sichtbar ist. Das ist das Gegenteil von cover, bei dem die Größe der größten Begrenzung (im obigen Beispiel die Breite) übernommen und die Größe des Bildes so angepasst wird, dass das ursprüngliche Seitenverhältnis beibehalten wird und das Bild in den Bereich passt. Im object-fit: none-Fall wird das Bild in der Mitte (Standardposition des Objekts) in seiner natürlichen Größe zugeschnitten.

object-fit: cover funktioniert in den meisten Situationen gut, um eine einheitliche Benutzeroberfläche zu gewährleisten, wenn Bilder mit unterschiedlichen Abmessungen verwendet werden. Allerdings gehen dabei Informationen verloren, da das Bild an den längsten Kanten zugeschnitten wird.

Wenn diese Details wichtig sind (z. B. bei der Arbeit mit einem Flatlay von Beauty-Produkten), ist das Zuschneiden wichtiger Inhalte nicht zulässig. Im Idealfall sind das responsive Bilder in verschiedenen Größen, die ohne Zuschneiden in den UI-Bereich passen.

Der alte Hack: Seitenverhältnis mit padding-top beibehalten

Mit padding-top ein Seitenverhältnis von 1:1 für Vorschaubilder von Beiträgen in einem Karussell festlegen

Um sie responsiver zu gestalten, können wir das Seitenverhältnis verwenden. So können wir ein bestimmtes Seitenverhältnis festlegen und den Rest der Media auf einer einzelnen Achse (Höhe oder Breite) basieren.

Eine derzeit weitgehend akzeptierte browserübergreifende Lösung zum Beibehalten des Seitenverhältnisses basierend auf der Breite eines Bildes ist der „Padding-Top Hack“. Für diese Lösung ist ein übergeordneter Container und ein absolut positionierter untergeordneter Container erforderlich. Das Seitenverhältnis wird dann als Prozentsatz berechnet, der als padding-top festgelegt wird. Beispiel:

• Seitenverhältnis 1:1 = 1 / 1 = 1 = padding-top: 100%
• Seitenverhältnis 4:3 = 3 / 4 = 0,75 = padding-top: 75%
• Seitenverhältnis 3:2 = 2 / 3 = 0,66666 = padding-top: 66.67%
• Seitenverhältnis 16:9 = 9 / 16 = 0,5625 = padding-top: 56.25%

Nachdem wir den Wert für das Seitenverhältnis ermittelt haben, können wir ihn auf den übergeordneten Container anwenden. Dazu ein Beispiel:

<div class="container">
  <img class="media" src="..." alt="...">
</div>

Wir könnten dann das folgende CSS schreiben:

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.media {
  position: absolute;
  top: 0;
}

Seitenverhältnis mit aspect-ratio beibehalten

Mit aspect-ratio ein Seitenverhältnis von 1:1 für die Vorschaubilder von Beiträgen in einem Karussell festlegen

Leider ist die Berechnung dieser padding-top-Werte nicht sehr intuitiv und erfordert zusätzlichen Aufwand und eine entsprechende Positionierung. Mit der neuen intrinsischen aspect-ratio-CSS-Eigenschaft ist die Sprache für die Beibehaltung von Seitenverhältnissen viel klarer.

Mit demselben Markup können wir padding-top: 56.25% durch aspect-ratio: 16 / 9 ersetzen und aspect-ratio auf ein bestimmtes Verhältnis von width / height festlegen.

padding-top verwenden

.container {
  width: 100%;
  padding-top: 56.25%;
}

Seitenverhältnis verwenden

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Die Verwendung von aspect-ratio anstelle von padding-top ist viel klarer und die padding-Eigenschaft wird nicht für etwas verwendet, das außerhalb ihres üblichen Anwendungsbereichs liegt.

Mit dieser neuen Eigenschaft kann auch das Seitenverhältnis auf auto festgelegt werden. Dabei gilt: „Ersetzte Elemente mit einem intrinsischen Seitenverhältnis verwenden dieses Seitenverhältnis. Andernfalls hat das Feld kein bevorzugtes Seitenverhältnis.“ Wenn sowohl auto als auch ein <ratio> angegeben sind, ist das bevorzugte Seitenverhältnis das angegebene Verhältnis von width geteilt durch height, es sei denn, es handelt sich um ein ersetzes Element mit einem intrinsischen Seitenverhältnis. In diesem Fall wird stattdessen dieses Seitenverhältnis verwendet.

Beispiel: Einheitlichkeit in einem Raster

Das funktioniert auch sehr gut mit CSS-Layoutmechanismen wie CSS Grid und Flexbox. Stellen Sie sich eine Liste mit untergeordneten Elementen vor, die ein Seitenverhältnis von 1:1 haben sollen, z. B. ein Raster mit Sponsorensymbolen:

<ul class="sponsor-grid">
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
</ul>

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.sponsor img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
}

Bilder in einem Raster mit dem zugehörigen übergeordneten Element in verschiedenen Seitenverhältnissen. Demo auf Codepen ansehen

Beispiel: Layout Shift verhindern

Ein weiteres tolles Feature von aspect-ratio ist, dass damit Platzhalter erstellt werden können, um Cumulative Layout Shift zu verhindern und bessere Web Vitals zu erzielen. In diesem ersten Beispiel wird beim Laden eines Assets über eine API wie Unsplash eine Layoutverschiebung verursacht, wenn die Medien geladen sind.

Video zur Veranschaulichung von kumulativen Layoutverschiebungen, die auftreten, wenn für ein geladenes Asset kein Seitenverhältnis festgelegt ist. Dieses Video wurde mit einem emulierten 3G-Netzwerk aufgenommen.

Wenn Sie aspect-ratio verwenden, wird ein Platzhalter erstellt, um diesen Layout Shift zu verhindern:

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}

Für ein geladenes Asset ist ein Video mit einem bestimmten Seitenverhältnis festgelegt. Dieses Video wurde mit einem emulierten 3G-Netzwerk aufgenommen. Demo auf Codepen ansehen

Bonustipp: Bildattribute für das Seitenverhältnis

Eine weitere Möglichkeit, das Seitenverhältnis eines Bildes festzulegen, sind Bildattribute. Wenn Sie die Abmessungen des Bildes im Voraus kennen, ist es Best Practice, diese Abmessungen als width und height festzulegen.

Wenn die Abmessungen wie im obigen Beispiel 800 × 600 Pixel betragen, sieht das Bild-Markup so aus: <img src="image.jpg" alt="..." width="800" height="600">. Wenn das gesendete Bild dasselbe Seitenverhältnis, aber nicht unbedingt genau diese Pixelwerte hat, können wir trotzdem Bildattributwerte verwenden, um das Verhältnis festzulegen. In Kombination mit dem Stil width: 100% wird das Bild dann im richtigen Bereich angezeigt. Insgesamt sieht das so aus:

<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">

/* CSS */
img {
  width: 100%;
  height: auto;
}

Letztendlich ist der Effekt derselbe wie beim Festlegen von aspect-ratio für das Bild über CSS. Außerdem wird der kumulative Layout-Shift vermieden (siehe Demo auf Codepen).

Fazit

Mit der neuen CSS-Eigenschaft aspect-ratio, die in mehreren modernen Browsern eingeführt wird, ist es etwas einfacher, das richtige Seitenverhältnis in Ihren Media- und Layoutcontainern beizubehalten.

Fotos von Amy Shamblen und Lionel Gustave über Unsplash.