Damaged image respects CSS dimensions

Question

I clamp image sizes using CSS:

#somewhere img { width: 160px; height: 90px; } 

When all the images load correctly, the page layout looks good. On the other hand, if any particular image does not load, my page layout is curled because the broken image will occupy 0px by 0px. Elements around this broken image will curl up. How to make broken images still respect CSS sizes so that my layout doesn't break?

Answer 1

Adding display: block to img should be good enough:

 #somewhere img { width: 160px; height: 90px; display: block; } 

---

If this somehow does not work, then the img wrapper in another element will work.

 <span><img class="channelLogoImg" width="160" height="90" src="" /></span> #somewhere span, #somewhere img { width: 160px; height: 90px; display: block; } 

I chose span because it is the usual choice for frivolous wrappers.

Answer 2

Depending on your layout, maybe you can add a CSS property

 display: [block/inline-block] 

into the "img" tag.

Or you can wrap div / span around images and give them a fixed height and width, for example:

 <div style="height:90px; width:160px"> <img src="foo.jpg" /> </div> 

Hope this helps

Answer 3

I know this is not a CSS solution, but I would always specify the width and height attributes of the image tag, not CSS - this will solve your problem with a screenshot for missing images.