CSS aspect ratio property

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

title: CSS aspect ratio property published: true date: 2026-02-15 14:11:22 UTC tags: css canonical_url: https://kzuraw.com/blog/2026/css-aspect-ratio

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 */
}

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.