Question

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 other 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?

Answer 1

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.