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

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 应该是我不知道的随机 url。

Answer 1

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

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

应该可以工作，期待 IE6。

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

---

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

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

Answer 2

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

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

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