html - 使用 CSS 更改 IMG 标签的默认大小

Question

A 有简单的图片标签，但 URL 错误

http://jsbin.com/monivava/1/edit

<img  src="http://placekitten!!!.com/g/200/200">

问题是这个失败图像的默认大小是 18x20(至少在 webkit 中是这样)，但我希望它是 0px，所以如果图像加载失败那么它将占用零空间。

有什么办法可以只用 CSS/HTML 做到这一点吗？

更新:

我没有任何 CSS 宽度/高度或 HTML 属性宽度/高度(参见上面的示例)

UPD2:

我知道我可以用 JS 做到这一点，但我已经明确表示我正在寻找仅限 CSS/HTML 的解决方案。

UPD3:

我只想更改加载失败的图像的默认大小。因此，如果图像加载失败，大小为 0px，如果加载为 100px(例如)

Answer 1

您可以在 Mozilla Firefox 中使用 CSS 来实现。使用这个:

img:-moz-broken:not([height]), img:-moz-user-disabled:not([height]) {
width: 12px;
height: 12px;
}

您也可以使用 display: none; 来隐藏损坏的图像，但这完全取决于您。

在 webkit 浏览器(如 Chrome、Safari)中，如果它坏了而你想隐藏或更改它，则没有这样的东西仅使用 CSS。您应该为此使用 jQuery。

编辑:

如果你想要它专门用于该图像，你可以使用:

<img src="http://placekitten!!!.com/g/200/200" height="12" width="12">

我的最后一次编辑:

 $("img").error(function(){
      $(this).hide();
    });

这是来自 jQuery documentation .对于 Webkit 应该足够了。