Html 使断开的图像尊重CSS维度

我正在使用CSS夹紧图像大小：

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

当所有图像加载正确时，我的页面布局看起来不错。另一方面，如果没有加载任何特定的图像，我的页面布局就会出错，因为损坏的图像将以0px乘0px的速度占用0px。破碎图像周围的元素将向上蜷缩。我如何使破碎的图像仍然尊重CSS维度，这样我的布局就不会崩溃

---

我知道这不是CSS解决方案，但我始终会指定图像标记的宽度和高度属性，而不是在CSS中-这将解决缺少图像的问题。

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

display: [block/inline-block]

到“img”标签

或者，您可以在图像周围制作div/span包装，并为其提供固定的高度和宽度，如：

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

---

希望这有帮助

将

显示：块

添加到

img

应该足够好了：

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

---

如果这不起作用，那么在另一个元素中包装

img

将起作用

#某处跨度，#某处img{
宽度：160px；
高度：90px；
显示：块；
}

---

我选择了

span

，因为这是轻浮包装的常见选择。

你确定用CSS选择了正确的图像吗？这是一个跨浏览器的问题吗？页面上还有什么CSS？如果用户键入错误的URL或服务器删除了有效的图像，则无法加载图像。@Josh:我确信CSS的目标是图像。我的屏幕截图显示了一个16x16图标夹持到160x90。然而，故意破坏的图像即使使用HTML宽度和高度属性也不能钳制到160x90。当我使用原型动态创建img时，这在Firefox5中（至少）不起作用：

new Element（'img'，{width:160，height:90，src:'doesNotExist.jpg'）。图像仍然没有占用有限的空间。我使用
display:block
方法，因为它更干净，布局可以与块图像一起工作。
<span><img class="channelLogoImg" width="160" height="90" src="" /></span>

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