Avoiding layout shifts: aspect-ratio vs width & height attributes

Last modified: July 13, 2022

An <img> is a “replaced element”, but it doesn’t have a “natural aspect ratio” until the browser has loaded enough of the image to know its real width & height. That means the 16 / 9 bit is ignored once the browser has the real data from the image. This doesn’t usually matter, because the result is the same. But, let’s say I got the width and height wrong:

Read more