Question

A包含错误网址的简单图片代码

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

问题是此失败图像的默认大小是18x20（至少在webkit上），但我希望它是0px，所以如果图像加载失败则会占用零空间。

我有没有办法只使用CSS / HTML？

UPD：

我没有任何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 ）中，如果它被破坏并且您想要使用{{}，则无法隐藏或更改它1}}仅。您应该使用CSS。

编辑：

如果您想专门针对该图片，可以使用：

jQuery

我上次编辑：

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

这来自jQuery documentation。应该足够Webkit。

Answer 2

好的，因为所有其他答案都表明JS，你不想使用它，我可以想到一个替代方案。

但实际上并不建议内容图片。

无论如何，如果你想这样做兼容crossbrowser（并且不仅仅是像上面的好答案那样的firefox）你必须使用div，将它的背景设置为透明和你的图像。

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

<style>
    #myImage {
        background: transparent url('http://placekitten!!!.com/g/200/200') no-repeat;
    }

    #myImage img {
        display: none
    }
</style>

Answer 3

您应该将CSS设置为auto - ＆gt;

img {
    width:auto;
    height:auto;
}

或者根本不定义高度和宽度。通过这样做，它将加载的图像大小作为大小（或父级div）。如果没有图像，因此没有尺寸信息，则没有空间。

Answer 4

你必须使用查询

$(document).ready(function(){
  if($("ImgID").attr('src')=="IMAGEFAIL/EXTENSION"){

    this.width("0");
    this.height("0");

    //instead you can use this.hide()

  }
});

Answer 5

如果图片无法加载，请删除图片：

<img  src="http://placekitten!!!.com/g/200/200" onerror="this.parentNode.removeChild(this)" >

使用CSS更改IMG标记的默认大小

5 个答案: