DEV Community

Krzysztof Żuraw
Krzysztof Żuraw

Posted on • Originally published at kzuraw.com on

CSS aspect ratio property

I recently learned that I can use CSS aspect ratio property to tell browser how tall should image be responsively:

img {
    width: '100%',
    aspect-ratio: "333 / 298" /* width / height of image */
}
Enter fullscreen mode Exit fullscreen mode

Thanks to that browser will know how tall the image should be without hardcoding image height. It also prevents layout shift (CLS) because browser reserves the correct space before image loads.

Top comments (0)