Question

我想将空图像的大小修改为150px。在Firefox上，我可以使用float: left，但它无法在Google Chrome上运行。

HTML：

<div>
 <img src='some broken url' alt='no image'>
 <br>
 <img src='http://farm7.staticflickr.com/6063/6046604665_da6933bd10.jpg'>
</div>

CSS：

div {
    width: 450px;
    height: 500px;
    background: cyan;
}

img {
    display: block;
    max-width: 100%;
    min-height: 150px;
    min-width: 150px;
    background: grey;
}

是否有针对此的CSS解决方案？

我认为存在一些误解。 srcs应该是我在高级时不会知道的随机网址。

Answer 1

理想情况下，请使用空占位符<div>：

<div>
 <div><!----></div>
 <br>
 <img src='http://farm7.staticflickr.com/6063/6046604665_da6933bd10.jpg'>
</div>

...并给它你需要的尺寸。这将允许您执行诸如在其位置显示背景占位符图像等内容。

Answer 2

如果要设置空图像标记的样式：

img[src=""] { width: 150px; }

应该有效，期待IE6。

如果您希望跨浏览器兼容，@Tom的解决方案将是您的最佳选择。

或jQuery解决方案（因为CSS无法检查损坏的URL）：

$('img').error(function(){
    $(this).css('width', '150px');
});

如何在不影响非空图像的情况下调整空图像的大小？

2 个答案: