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
grid-template-areas – ein Layout, das man im Code sehen kann
Statt Zeilen- und Spaltennummern zu zählen, malst du dein Layout als kleine ASCII-Zeichnung ins CSS. Auf dem Handy schreibst du die Zeichnung einfach anders – dieselben Bausteine, andere Anordnung, kein einziger geänderter HTML-Knoten.
Tooltips ohne JavaScript – CSS Anchor Positioning
Ein Tooltip an einen Button hängen, der ausweicht, wenn oben kein Platz ist, und nicht am overflow: hidden der Elternbox scheitert – das brauchte jahrelang eine Bibliothek. Seit Firefox 147 kann das jeder große Browser in reinem CSS.
Schöne Zeilenumbrüche in CSS – text-wrap balance und pretty
Eine Überschrift, bei der ein einzelnes Wort einsam in der letzten Zeile hängt, sieht unruhig aus. Mit text-wrap balance und pretty überlässt du dem Browser das saubere Umbrechen – ohne manuelle <br> und ohne JavaScript.