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

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.

Comments

[Naimesh Rao]

Example demonstrating the CSS aspect-ratio property:
codepen.io/naimeshrao/pen/azmdBoo