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.
Top comments (0)