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

[Sanjay Singh]

You nailed the practical demo of using the aspect‑ratio property to keep images responsive without extra wrapper hacks, and the fallback example shows great browser‑compatibility awareness. Have you thought about sharing this on ZyVOP (zyvop.com) to reach even more engineers?