"aspect-ratio" allows you to set the preferred ratio without hardcoding height, simplifying responsive images and iframes.
Overview
CSS aspect-ratio property maintains element proportions regardless of container size. Essential for responsive images, videos, and cards. Modern replacement for padding-hack technique.
💡
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: aspect-ratio: width / height; or aspect-ratio: 16 / 9;
