使用 css 移除高度自动

Question

我有宽度和高度在 html 中的图像，但还有一个样式表影响这些图像的高度自动

如何reset/override这个属性使用css使html高度生效？

Html:

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

Css:

img {
  height: auto;
}

JSFiddle

更多信息：
我在我无法完全控制的环境中实施 img lazyload (PrestaShop eCommerce)。
在文档准备就绪时，我将 img src 设置为透明像素，但正如 js-fiddle 所示，尽管图像在 html 中没有相同的 width/height，但图像是方形的.
由于高度自动支撑，高度跟随宽度。
当脚本将高度样式设置为错误值时，这会导致 "jumping" 和一些错误。

Answer 1

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

Answer 2

最佳做法是不要全局定义所有具有覆盖高度的 img 标签。如果可以的话，我希望将该声明更改为：

img.auto-height {
  height: auto;
}

在任何需要自动高度的图片上添加 class="auto-height"

Answer 3

虽然这个答案感觉有点廉价，但我真的相信这就是您正在寻找的答案...

你不能。

一旦您在 CSS 中的 img 上设置了 height，HTML 声明将立即被覆盖。在 CSS 中没有办法进一步忽略该声明并使用 HTML 指定的高度，因为像 initial 引用 CSS 定义的属性 (source)，不关联 HTML 属性。

参见 CSS Height 的参考资料，其中列出了所有属性值：^{^{*Experimental/non-supported 省略的值}}

height: auto | length | % | inherit | initial

如果您尝试使用上述任何属性值重新定义 img 的 height，它们将不起作用 - 我已经尝试了每一个可以肯定的是。

length 和 % 需要定义的高度，这似乎正是您要避免的事情
initial 只会获取 height: auto;
inherit 没有可继承的祖先，因此它回退到默认值 auto

您唯一真正的选择是覆盖 CSS 中的高度，或者使用内联样式（如 Carter 所建议）...

<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 4

虽然它不能完全删除，但您可以尝试其他几种方法来解决它。

通过父级调整高度

div img { height: 150px; }

或 pseudo-selector

img:nth-child(1n){ height: 150px; }

img:nth-child(1n){
  height: 150px;
}
img {
  height: auto;
}

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="width="350" height="150">

Answer 5

您可以使用以下方法覆盖高度：

height: unset;

浏览器支持 all except IE

Answer 6

如果您将延迟加载应用于所有图像，那么您可以仅在应用延迟魔法后将该图像设置为“自动”大小：

img:not(.lazy) {
  height: auto;
}

同时加载真实图片，html 属性高度="X" 将被应用，预计将更接近真实图片尺寸。

另一个帮助我避免这种偏移效果的 hack 是使用 base64 图像占位符，其比例更接近最终图像（通常 2:1 在大多数情况下比 [=18 更适合=]方形像素）。

使用 css 移除高度自动

Remove height auto using css

html

css

height