Daily Shaarli

All links of one day in a single page.

July 17, 2022

Avoiding <img> layout shifts: aspect-ratio vs width & height attributes - JakeArchibald.com

Without auto, the remains 4 / 3, and the image appears stretched. You can avoid the stretching with object-fit:

img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
}

Although, if the image isn't actually that aspect ratio, it'll either end up stretched (object-fit: fill), letter-boxed (object-fit: contain), or cropped (object-fit: cover). None of which are ideal.