html - 使损坏的图像符合 CSS 尺寸

Question

我正在使用 CSS 限制图像大小:

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

当所有图像正确加载时，我的页面布局看起来不错。另一方面，如果没有加载任何特定图像，我的页面布局就会搞砸，因为损坏的图像将占用 0px x 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，因为这是普通包装器的通常选择。