Neue CSS-Eigenschaft für das Seitenverhältnis wird in Chromium, Safari Technology Preview und Firefox Nightly unterstützt

Die neue CSS-Eigenschaft, die dazu beiträgt, den Abstand in responsiven Layouts beizubehalten.

Una Kravets

Seitenverhältnis

Unterstützte Browser

  • 88
  • 88
  • 89
  • 15

Quelle

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

Zwei Bilder mit demselben Seitenverhältnis. Das eine ist 634 x 951 Pixel, das andere 200 x 300 Pixel. Beide haben ein Seitenverhältnis von 2:3.
Zwei Bilder mit demselben Seitenverhältnis. Das eine ist 634 x 951 Pixel, das andere 200 x 300 Pixel. Beide haben ein Seitenverhältnis von 2:3.

Mit der Einführung des responsiven Designs wird das Seitenverhältnis für Webentwickler immer wichtiger, insbesondere da sich Bildabmessungen und Elementgrößen je nach verfügbarem Platz ändern.

Hier einige Beispiele für Fälle, in denen das Seitenverhältnis wichtig ist:

  • Responsive iFrames erstellen, die 100% der Breite eines übergeordneten Elements ausmachen und die Höhe ein bestimmtes Seitenverhältnis des Darstellungsbereichs beibehalten sollte
  • Eigenständige Platzhaltercontainer für Bilder, Videos und Einbettungen erstellen, um ein Layoutverschiebung zu verhindern, wenn die Elemente geladen werden und Speicherplatz belegen
  • Einheitliche, responsive Bereiche für interaktive Datenvisualisierungen oder SVG-Animationen erstellen
  • Einheitliche, responsive Bereiche für Komponenten mit mehreren Elementen wie Karten oder Kalenderdaten schaffen
  • Einheitlichen, responsiven Raum für mehrere Bilder mit unterschiedlichen Abmessungen schaffen (kann zusammen mit object-fit verwendet werden)

Objektanpassung

Das Definieren eines Seitenverhältnisses hilft uns dabei, die Größe von Medien in einem responsiven Kontext anzupassen. Ein weiteres Tool in diesem Bucket ist das Attribut object-fit, mit dem Nutzer beschreiben können, wie ein Objekt (z. B. ein Bild) in einem Block diesen Block füllen soll:

Demovisualisierung für Objektanpassung
Darstellung verschiedener object-fit-Werte. Siehe Demo zu Codepen.

Mit den Werten für initial und fill wird das Bild angepasst, um den Platz zu füllen. In unserem Beispiel wird das Bild dadurch zusammengedrückt und verschwommen, da die Pixel neu angepasst werden. Nicht ideal. object-fit: cover füllt den Raum mit der kleinsten Abmessung aus und schneidet das Bild basierend auf dieser Größe so zu, dass es passt. Es „zoomt an der untersten Grenze heran“. object-fit: contain sorgt dafür, dass das gesamte Bild immer sichtbar ist. Das Gegenteil von cover, bei dem die Größe der größten Begrenzung verwendet wird (in unserem obigen Beispiel ist die Breite), passt die Größe des Bildes so an, dass sein intrinsisches Seitenverhältnis erhalten bleibt, während es in den Raum passt. Bei object-fit: none wird das Bild in der Mitte (Standard-Objektposition) in seiner natürlichen Größe zugeschnitten.

object-fit: cover funktioniert in den meisten Situationen, um bei Bildern mit unterschiedlichen Abmessungen eine einheitliche Oberfläche zu gewährleisten. Dabei gehen jedoch Informationen verloren, da das Bild an seinen längsten Rändern zugeschnitten wird.

Wenn diese Details wichtig sind, z. B. bei der Arbeit mit Beauty-Produkten auf einer Fläche, ist es nicht akzeptabel, wichtige Inhalte zuzuschneiden. Das ideale Szenario wären also responsive Bilder unterschiedlicher Größe, die ohne Zuschneiden in die Benutzeroberfläche passen.

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

Mit einem Innenrand ein Seitenverhältnis von 1:1 für Post-Vorschaubilder in einem Karussell festlegen
Mit padding-top ein Seitenverhältnis von 1:1 für Post-Vorschaubilder in einem Karussell festlegen.

Um diese responsiv zu gestalten, können wir das Seitenverhältnis verwenden. So können wir eine bestimmte Verhältnisgröße festlegen und die übrigen Medien auf einer einzelnen Achse (Höhe oder Breite) basieren.

Eine derzeit beliebte browserübergreifende Lösung zur Beibehaltung des Seitenverhältnisses, die auf der Breite eines Bildes basiert, wird als „Padding-Top-Hack“ bezeichnet. Diese Lösung erfordert einen übergeordneten Container und einen absolut platzierten untergeordneten Container. Anschließend wird das Seitenverhältnis als Prozentsatz berechnet und als padding-top festgelegt. 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 nun 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>

Dann könnten wir den folgenden CSS-Code 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

Verwendung eines Seitenverhältnisses von 1:1 für Post-Vorschaubilder in einem Karussell
Mit aspect-ratio ein Seitenverhältnis von 1:1 für Post-Vorschaubilder in einem Karussell festlegen.

Leider ist die Berechnung dieser padding-top-Werte nicht sehr intuitiv und erfordert zusätzliche Aufwand und Positionierung. Mit dem neuen integrierten CSS-Attribut aspect-ratio ist die Sprache zum Verwalten von Aspektverhä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 zu height setzen.

Verwendung des Abstands zum oberen Rand
.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 übersichtlicher und das Attribut „Padding“ wird nicht überarbeitet, um Aktionen außerhalb des üblichen Bereichs auszuführen.

Mit dieser neuen Eigenschaft wird außerdem die Möglichkeit hinzugefügt, das Seitenverhältnis auf auto festzulegen, wobei "ersetzte Elemente mit einem intrinsischen Seitenverhältnis dieses Seitenverhältnis verwenden; andernfalls hat die Box kein bevorzugtes Seitenverhältnis." Wenn sowohl auto als auch <ratio> zusammen angegeben sind, ist das bevorzugte Seitenverhältnis das angegebene Verhältnis von width geteilt durch height, es sei denn, es handelt sich um ein ersetztes Element mit einem intrinsischen Seitenverhältnis. In diesem Fall wird stattdessen dieses Seitenverhältnis verwendet.

Beispiel: Einheitlichkeit in einem Raster

Dies funktioniert auch sehr gut mit CSS-Layoutmechanismen wie CSS Grid und Flexbox. Denken Sie an eine Liste mit Kindern, die ein Seitenverhältnis von 1:1 beibehalten soll, z. B. ein Raster mit Sponsorsymbolen:

<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 übergeordneten Element in verschiedenen Seitenverhältnissen. Demo zu Codepen ansehen.

Beispiel: Layout Shift verhindern

Ein weiteres tolles Feature von aspect-ratio ist, dass es Platz für Platzhalter schaffen kann, um Cumulative Layout Shift zu verhindern und bessere Web Vitals zu liefern. In diesem ersten Beispiel führt das Laden eines Assets von einer API wie Unsplash zu einer Layoutverschiebung, sobald das Medium fertig geladen ist.

Video eines kumulativen Layout Shifts, das auftritt, wenn für ein geladenes Asset kein Seitenverhältnis festgelegt ist. Dieses Video wird mit einem emulierten 3G-Netzwerk aufgezeichnet.

Bei Verwendung von aspect-ratio wird hingegen ein Platzhalter erstellt, um diesen Layoutverschiebung zu verhindern:

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}
Ein Video mit einem festgelegten Seitenverhältnis wird für ein geladenes Asset festgelegt. Dieses Video wird mit einem emulierten 3G-Netzwerk aufgezeichnet. Demo zu Codepen ansehen.

Tipp: Bildattribute für das Seitenverhältnis

Sie können das Seitenverhältnis auch über Bildattribute festlegen. Wenn Sie die Abmessungen des Bilds vorab kennen, sollten Sie diese Best Practices als width und height festlegen.

Im obigen Beispiel mit den Abmessungen 800 x 600 Pixel würde das Bild-Markup so aussehen: <img src="image.jpg" alt="..." width="800" height="600">. Wenn das gesendete Bild dasselbe Seitenverhältnis hat, aber nicht unbedingt genau diese Pixelwerte, können wir trotzdem Bildattributwerte verwenden, um das Verhältnis festzulegen, in Kombination mit dem Stil width: 100%, damit das Bild den richtigen Platz einnimmt. Das Ganze würde dann so aussehen:

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

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

Letztendlich ist der Effekt derselbe wie beim Festlegen von aspect-ratio für das Bild über CSS und es wird eine kumulative Layoutverschiebung vermieden (siehe Demo zu Codepen).

Fazit

Mit der neuen CSS-Eigenschaft aspect-ratio, die in mehreren modernen Browsern gestartet werden kann, wird es etwas einfacher, die richtigen Seitenverhältnisse in Ihren Medien- und Layoutcontainern beizubehalten.

Fotos von Amy Shamblen und Lionel Gustave über Unsplash.