How to force an <img> to take up width, even if the image is not loaded

Sambo picture Sambo · Sep 25, 2010 · Viewed 13.7k times · Source

I'm loading a bunch of img's, and I'd like them to take up space on the document even if they are not loaded, or have not completed loading yet.

I tried specifying width and height (both as attributes themselves, and within a style attribute), and find it frustrating that the images will not take up space if they don't load.

Surely, there must be a way to force an img to specific dimensions, **even if that image fails to load.

Thanks

Answer

David says reinstate Monica picture David says reinstate Monica · Sep 25, 2010

There certainly is:

<img src="path/to/image.png" height="50" width="20" />

Also, the reason specifying the width and height within the style="/* css */" attribute didn't work is because images are, by default, in-line elements. Had you specified display: block the image would've accepted the width and height values.

If you add, to the css/style:

display: inline-block;

It should work. I'm not sure why Firefox doesn't respect the width/height attributes, but still. Even IE, with a defined doctype should respect display: inline-block, since img elements are, by default, in-line anyway.