"aspect-ratio" allows you to set the preferred ratio without hardcoding height, simplifying responsive images and iframes.
Overview
Właściwość współczynnika proporcji CSS zachowuje proporcje elementów niezależnie od rozmiaru kontenera. Niezbędny w przypadku responsywnych obrazów, filmów i kart. Nowoczesny zamiennik techniki padding-hack.
💡
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.
