Die neue CSS-Eigenschaft, die dazu beiträgt, den Abstand in responsiven Layouts beizubehalten.
Seitenverhältnis
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.](https://web.dev/static/articles/aspect-ratio/image/two-images-the-same-aspe-c70cc7ed740f8.jpg?authuser=6&hl=de)
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](https://web.dev/static/articles/aspect-ratio/image/object-fit-demo-visualiza-6e1b75de8297c.jpg?authuser=6&hl=de)
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](https://web.dev/static/articles/aspect-ratio/image/using-padding-top-set-1-9702b5487f14c.jpg?authuser=6&hl=de)
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](https://web.dev/static/articles/aspect-ratio/image/using-aspect-ratio-set-e58f152775151.jpg?authuser=6&hl=de)
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.
.container { width: 100%; padding-top: 56.25%; }
.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;
}
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.
Bei Verwendung von aspect-ratio
wird hingegen ein Platzhalter erstellt, um diesen Layoutverschiebung zu verhindern:
img {
width: 100%;
aspect-ratio: 8 / 6;
}
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.