ansaurus

Question

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

Answer 1

+5 A:

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.

David Thomas 2010-09-25 00:33:40

@Andrew Vit, thanks for the edit. I accidentally un-did it while I was adding information at the same time as you performed your edit. The revocation was accidental, and an oversight. Edited your edit back in, where it belongs! =)

David Thomas 2010-09-25 00:53:47

This doesn't work if the image does not load. At least, in latest FF on Windows.

Sambo 2010-09-25 01:01:41

@Sambo, nor in Firefox 3.6.10 on Ubuntu 10.04. See edit, and [jsbin demo](http://jsbin.com/ojocu3/3/), it should work now.

David Thomas 2010-09-25 01:12:28

@David How to define DOCTYPE in IE to respect `display: inline-block`? Thanks.

Jeaffrey Gilbert 2010-09-25 01:24:57

It's been a while since I worked with IE, but have a look at: [Doctype.com](http://doctype.com/doctype-should-use), or [htmlhelp.com](http://htmlhelp.com/tools/validator/doctype.html) for ideas. It mostly depends on your usage, but I'd personally recommend `<!DOCTYPE html>` now, but otherwise html or xhtml strict are both good.

David Thomas 2010-09-25 01:32:40

display: inline-block; works beautifully. Thanks for the help, David.

Sambo 2010-09-25 01:55:01

@Sambo, always a pleasure =)

David Thomas 2010-09-25 01:59:44

@Sambo, also, if that's solved your problem, I wouldn't be *offended* if you decided to accept the answer =b

David Thomas 2010-09-25 03:25:34

I accepted this as the answer. I hope, as promised, you will not be offended. :)

Sambo 2010-09-25 04:09:38

@Sambo, ha! You, sir, are a star. Many thanks for the accept =)

David Thomas 2010-09-25 04:11:04

Answer 2

A:

The simple answer: wrap the image in a <div> with a fixed width.

<div style="width: 400px;"><img src="404.png" /></div>

If you set padding, border etc to 0, you won't notice that the div is there.

Tomas Lycken 2010-09-25 00:34:58

So why put it there? The `div` will shrink-to-fit around the image *unless* it (the `div`) is set to `display: block` or `inline-block`. So you'd be as well off just specifying `display: block;` (or `inline-block`) on the `img`, plus `img` accepts `width` and `height` attributes for a reason.

David Thomas 2010-09-25 00:37:24

No, the `div` will *not* shrink to fit around the image - `display: block` is the default value for a `div`. On the other hand, specifying `display: block` on the image would probably work just as well. The problem with that is, that if you load a smaller image than the html specified dimensions, the image will be distorted.

Tomas Lycken 2010-09-25 09:33:04

ansaurus

tags:

views:

answers:

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

related questions