使破碎的图像尊重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，因为这是无聊包装的常用选择。

Answer 2

根据您的布局，您可以添加CSS属性

display: [block/inline-block]

到“img”标签。

或者你可以在图像周围制作div / span包装，并给它们固定的高度和宽度，如：

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

希望这有帮助

Answer 3

我知道这不是CSS解决方案，但我总是指定图像标签的宽度和高度属性而不是CSS - 这将解决丢失图像的scrunching问题。