CSS: make image take up space before loading when inside other inline-block element

Question

I'm working on an image gallery site, which shows a bunch of images of different sizes and aspect ratios. The images should be shown many on a line if they fit.

Each image should be say no wider than 20vw, and no taller than 300px.

Critically, I don't want any "jank" as the page loads - each picture should take up it's space before it has loaded so it all loads smoothly without jank / layout shift, even when internet is slow.

Now, I've managed to achieve this for images that are just sitting straight in the document. But I can't get it to work when they are wrapped inside a

user_5078765 · Answer

Change inline-block to inline on figure.

* {
  margin: 0;
}

body {
  background-color: lightgray;
}

figure {
  display: inline; /* The only thing I changed */
  background-color: lightblue;
}

img {
  max-width: 20vw;
  max-height: 300px;
  height: auto;
  width: auto;
  background-color: black;
  display: inline-block;
}

figure img {
  background-color: gray;
}

These 2 images take up space correctly while loading:



These 2 images just jank into existence when they load:

  


  



some text that shouldn't move as the page loads

However... In Edge and Chrome, neither the images with or without wrapping figures load immediately, in your example or mine. Only in FireFox do they have a height and width before loading. You should wrap them in tags with a specified height and width for a cross browser solution.

New Solution:

I honestly had no idea what made the first example work in FireFox, I just had some intuition that the display mode often affects the volume of elements in strange ways. This exploration did demonstrate to us that browsers do not all render the above example the same way, which is unfortunate. I have an alternate solution for you though. After reading this excerpt from the page you linked me to I found something that seemed to work:

When the width/height of an element — as set using HTML attributes — is overidden using CSS using something like this:
img {
  max-width: 100%;
  height: auto;
}
The aspect ratio is then used to calculate the height and therefore the correct size is applied to the element, meaning that the aforementioned jank will not occur when the image loads.

My solution is to remove the width:auto, it seems to work in both Firefox and Chrome. Honestly I also do not entirely know why this works either... My guess would be that the width:auto was overriding the width as it was defined on the element itself, thus not allowing the auto-magic aspect-ratio to be calculated, or something... If anyone wants to chime in an explain it properly, that would be appreciated.

Here is the demo:

* {
  margin: 0;
}

body {
  background-color: lightgray;
}

figure {
  display: inline-block; /* I put this back to how you had it */
  background-color: lightblue;
}

img {
  max-width: 20vw;
  max-height: 300px;
  height: auto;
  /*width: auto;*//*New solution, don't specify width, only height*/
  background-color: black;
  display: inline-block;
}

figure img {
  background-color: gray;
}

These 2 images take up space correctly while loading:



These 2 images just jank into existence when they load:

  


  



  some text that shouldn't move as the page loads

user_2374549 · Answer

I wrapped your rows with a div and I fixed their width as you write in question. All images has holder (you already do that with the

CSS: make image take up space before loading when inside other inline-block element

2 Answers

New Solution: