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
Bilder ohne Verzerren einpassen mit object-fit
Wenn ein Bild in einen festen Rahmen soll, wird es schnell gestaucht oder verzerrt. object-fit löst das: Das Bild füllt den Rahmen oder passt komplett hinein – ohne die Proportionen zu ruinieren. Mit object-position steuerst du den Ausschnitt.
Slider und Karussell mit CSS scroll-snap – ohne Bibliothek
Ein wischbares Karussell, das sauber an jeder Karte einrastet, brauchst du nicht per JavaScript zu bauen. Mit scroll-snap sagst du dem Browser, wo der Scroll stehenbleiben soll – flüssig, mit Touch und Trackpad.
Modale Dialoge ohne Framework – das native <dialog>-Element
Für ein Modal brauchst du kein Bibliotheks-Ballast und keine z-index-Schlacht. Das HTML-Element <dialog> bringt Overlay, Fokus-Falle und Schließen mit Escape von Haus aus mit. Ich zeige dir showModal(), ::backdrop und das saubere Schließen.