使破碎的图像尊重CSS尺寸

Question

我用CSS夹紧图像尺寸:

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

当所有图像正确加载后,我的页面布局看起来很好.另一方面,如果没有加载任何特定图像,我的页面布局会搞砸,因为损坏的图像将占用0px乘以0px.破碎图像周围的元素将向上嘎吱作响.如何使破碎的图像仍然尊重CSS尺寸,以便我的布局不会崩溃？

Answer 1

添加display: block到img就足够好了:

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

如果以某种方式不起作用,那么包装img在另一个元素中将起作用.

<span><img class="channelLogoImg" width="160" height="90" src="" /></span>

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

我之所以选择span,是因为这是轻薄包装纸的通常选择.