使用CSS删除高度自动

Question

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

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

网址：

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

CSS：

 img {
  height: auto;
}

JSFiddle

更多信息：

我在我无法完全控制的环境中实施 img lazyload (PrestaShop eCommerce)。

在准备好文档时，我将 img src 设置为透明像素，但正如 js-fiddle 所示，尽管图像在 html 中不具有相同的宽度/高度，但图像呈方形。

由于高度自动支撑，高度跟随宽度。

当脚本将高度样式设置为错误值时，这会导致“跳跃”和一些错误。

原文由 unloco 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

虽然这个答案感觉有点便宜，但我真的相信这是你正在寻找的答案……

---

你不能。

一旦您在 CSS 中的 height img HTML 声明将立即被覆盖。没有办法在 CSS 中进一步 忽略 该声明并使用 HTML 指定的高度，因为诸如 initial 之类的东西是指 CSS 定义的属性 _( source )_ ，而不是关联的 HTML 属性。

请参阅此 CSS 高度 参考，其中列出了所有属性值： *省略了实验/不支持的值

高度：自动 | 长度 | % |继承 |最初的

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

• length 和 % 需要定义的高度，这似乎正是您要避免的事情

• initial 只会获取—的初始CSS声明 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; 。

原文由 Tyler Roper 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

原文由 Carter 发布，翻译遵循 CC BY-SA 3.0 许可协议