Make broken image respect CSS dimensions

I am clamping image sizes with CSS:

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

When all images load properly, my page layout looks good. On the oth开发者_如何学运维er hand, if any particular image does not load, my page layout gets screwed up because the broken image will occupy 0px by 0px. Elements around that broken image will scrunch upwards. How do I make broken images still respect the CSS dimensions so my layout doesn't collapse?

Adding display: block to img should be good enough:

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

If that somehow doesn't work, then wrapping the img 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 that's the usual choice for frivolous wrappers.

Depending on your layout, maybe you can add CSS property

display: [block/inline-block]

to "img" tag.

Or you can make div/span wrapper around images and give them fixed height and width like:

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

Hope this helps

I know this is not a CSS solution but I would always specify the width and height attributes of the image tag rather than in CSS - this will resolve your scrunching issue for missing images.