使破碎的形象关于CSS尺寸

我夹紧图像尺寸的CSS：使破碎的形象关于CSS尺寸

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

当所有的图像加载正确的，我的网页布局看起来不错。另一方面，如果没有加载任何特定的图像，我的页面布局就会变得糟糕，因为破碎的图像将占用0px的0px。破碎图像周围的元素会向上卷起。我如何让破碎的图像仍然尊重CSS尺寸，所以我的布局不会崩溃？

broken image

来源

2011-07-14 JoJo

他们为什么不加载？ – BoltClock

你确定你正在用CSS选择正确的图像吗？这是一个跨浏览器问题吗？网页上还有哪些CSS？ – fncomp

如果用户输入错误的URL或者服务器删除了有效的图像，则无法加载图像。 – JoJo

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

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

如果这种方式不起作用，然后换行ping img在另一个元素将工作。

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

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

我选择了span，因为这是无聊包装的常用选择。

来源

2011-07-14 23:59:30 thirtydot

我正在使用'display：block'方法，因为它更干净，布局与块图像一起工作。 – JoJo

我知道这是不是一个CSS解决方案，但我总是会指定宽度和CSS图像标签，而不是height属性 - 这将解决你的问题碾碎丢失的图像。

来源

2011-07-14 23:35:48

当我使用Prototype动态创建img时，这在Firefox 5中不起作用（至少）：'new Element（'img'，{width：160，height：90，src：'doesNotExist.jpg'}）;'。图像仍然不占用有限的空间。 – JoJo

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

display: [block/inline-block]

为 “IMG” 标签。

也可以使DIV/SPAN包装图像周围，给他们固定的高度和宽度，如：

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

希望这有助于

来源

2011-07-14 23:59:11 Nebojsa

使破碎的形象关于CSS尺寸

回答

相关问题