"aspect-ratio" allows you to set the preferred ratio without hardcoding height, simplifying responsive images and iframes.
Overview
Die CSS-Eigenschaft „Seitenverhältnis“ behält die Elementproportionen unabhängig von der Containergröße bei. Unverzichtbar für responsive Bilder, Videos und Karten. Moderner Ersatz für die Padding-Hack-Technik.
💡
Pro Tips
Provide a default aspect ratio for <img> elements to prevent 'Cumulative Layout Shift' during page load.
The padding-top/bottom trick works by basing the padding percentage on the parent's width.
You can now use `aspect-ratio` on almost all elements including divs, iframes, and videos.
If you provide both width and height PLUS an aspect-ratio, the width/height usually takes precedence in browsers.
!
Fun Facts
Formula: Seitenverhältnis: Breite / Höhe; oder Seitenverhältnis: 16 / 9;
