使用css删除高度auto

Question

我有html的宽度和高度的图像,但也有一个样式表影响这些图像与高度auto

如何使用css重置/覆盖此属性,以便html高度生效？

HTML:

<img src="..." width="350" height="150" />

CSS:

img {
  height: auto;
}

的jsfiddle

更多信息:
我正在一个我无法完全控制的环境中实现img lazyload(PrestaShop电子商务).
在准备好文档时,我将img src设置为透明像素,但正如js-fiddle所示,图像平方,但在html中没有相同的宽度/高度.
由于高度自动支撑,高度跟随宽度.
当脚本将高度样式设置为错误值时,这会导致"跳跃"并导致一些错误.

Answer 1

虽然这个答案有点便宜,但我真的相信这是你正在寻找的答案......

你不能.

一旦你设置一个height的img在CSS中,HTML声明将立即被覆盖.CSS中没有任何方法可以忽略该声明并使用HTML指定的高度,因为像initial这样的东西引用了CSS定义的属性(source),而不是关联的HTML属性.

请参阅CSS Height的此参考,其中列出了所有属性值:^{*省略了实验/不支持的值}

身高:自动| 长度 | %| 继承| 初始

如果试图重新定义height的img使用任何上述属性值,他们将无法正常工作-我只是试着每一个可以肯定的.

• length并且%需要一个确定的高度,这似乎是你想要避免的确切事情

• initial 将抓住最初的CSS声明 height: auto;

• inherit 没有祖先继承,因此它回退到默认值 auto

您唯一真正的选择是使用内嵌样式(如Carter建议的那样)覆盖CSS中的高度...

<img style="height: 150px;" />

或者通过应用ID或类等选择器...

<img id="my_image" />

#my_image {
    height: 150px;
}

或者,如果您需要使用JS来自动生成替代,请考虑类似这样的jQuery解决方案:

$("img").each(function() {        //Loop through all images
    var $t = $(this);             //$t is the current iteration
    var ht = $t.attr("height");   //Get the HTML height
    ht = ht ? ht+"px" : "auto";   //If HTML height is defined, add "px" | Else, use "auto"
    $t.css("height", ht);         //Apply the height to the current element
});

这将循环遍历页面上的所有图像,并应用CSS高度以匹配HTML高度.如果没有HTML高度,它将使用height: auto;.

Answer 2

您可以使用内联css覆盖其他CSS.img高度不会覆盖css,因为它是html所以你需要使用<img src="..." width="350" style="height:150px;" />