aspect-ratio in CSS – Seitenverhältnisse ohne Padding-Trick
Früher brauchte man den berüchtigten padding-top-Hack, um ein 16:9-Element zu bauen. Mit aspect-ratio geht das in einer Zeile – für Videos, Vorschaubilder und quadratische Kacheln, die beim Laden nicht springen.
Ein festes Seitenverhältnis war in CSS lange ein Ärgernis: Man missbrauchte padding-top: 56.25% als 16:9-Platzhalter und schob den Inhalt absolut positioniert hinein. Heute gibt es dafür genau eine Eigenschaft: aspect-ratio.
Ein 16:9-Video-Container
.video {
aspect-ratio: 16 / 9;
width: 100%;
}
.video iframe {
width: 100%;
height: 100%;
}Die Höhe ergibt sich automatisch aus der Breite. Egal wie breit .video wird – das Verhältnis bleibt 16:9, ganz ohne Rechnerei.
Quadratische Kacheln
.kachel {
aspect-ratio: 1; /* Kurzform für 1 / 1 */
width: 100%;
object-fit: cover;
}Perfekt für Galerie-Raster: Jede Kachel bleibt quadratisch, unabhängig vom Bildinhalt.
Der wichtigste Nebeneffekt: kein Layout-Springen
Wenn du bei einem <img> Breite und Höhe im HTML angibst, kennt der Browser das Verhältnis schon vor dem Laden und reserviert den Platz. Das verhindert das nervige „Springen" der Seite, während Bilder nachladen (Layout Shift):
<img src="foto.jpg" width="800" height="600" alt="…">Der Browser leitet daraus intern aspect-ratio: 800 / 600 ab. Willst du das Bild responsiv skalieren, ergänze:
img {
max-width: 100%;
height: auto; /* Verhältnis bleibt erhalten */
}Fallstrick
Setzt du sowohl eine feste height als auch aspect-ratio, gewinnt die feste Höhe – das Verhältnis wird dann ignoriert. Gib also nur eine der beiden Dimensionen vor und lass die andere die Engine berechnen.
aspect-ratio läuft in allen aktuellen Browsern. Wenn du eine schnelle, ruhig ladende Website willst, baue ich dir das sauber auf – meld dich über bymw.de.
Quellen
Du brauchst mehr als ein Snippet?
Ich entwickle Android-Apps in Kotlin und moderne Websites für Selbstständige und kleine Unternehmen — von der ersten Idee bis zum Release.
Projekt anfragen →Verwandte Snippets
:is() und :where() – kürzere Selektoren, und einer davon wiegt nichts
Drei fast gleiche Selektoren untereinander, nur weil die Überschrift mal h2 und mal h3 heißt? :is() fasst das zusammen. Und :where() macht dasselbe, ohne die Spezifität hochzutreiben – der Unterschied ist der ganze Trick.
content-visibility – lange Seiten rendern, ohne dass der Browser alles auf einmal baut
Bei sehr langen Seiten rechnet der Browser Layout und Malen für jeden Abschnitt – auch für die, die 8.000 Pixel weiter unten liegen. Eine CSS-Eigenschaft verschiebt diese Arbeit auf den Moment, in dem sie gebraucht wird.
color-mix() – Hover- und Dark-Mode-Farben ausrechnen lassen, statt sie zu pflegen
Für jede Markenfarbe eine hellere, eine dunklere und eine transparente Variante von Hand zu pflegen, ist Fleißarbeit mit Fehlerquote. color-mix() mischt sie im Browser – aus genau einer Quellfarbe.