使用CSS删除高度自动 [英] Remove height auto using css

问题描述

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

I have images which have width and height in html but there is also a stylesheet affecting these images with height auto

如何使用CSS重置/覆盖此属性，因此html高度生效？

How to reset/override this property using css so that the html height comes into effect?

HTML：

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

Css：

img {
  height: auto;
}

JSFiddle

更多信息：

我正在我不喜欢的环境中实现img lazyload t完全控制（PrestaShop eCommerce）。

准备好文档后，我将img src设置为透明像素，但是正如js-fiddle所示，图像是正方形的，尽管它没有相同的图像html中的width / height。

由于高度自动道具，高度跟随宽度。

这会导致跳转，并且在脚本设置高度时也会导致一些错误。样式错误的值。

More info:
I'm implementing img lazyload in an environment I don't fully control (PrestaShop eCommerce).
On document ready, I'm setting the img src to a transparent pixel but as the js-fiddle shows, the image comes squared althought it doesn't have the same width/height in html.
The height is following the width because of the height auto prop.
This leads to "jumping" and also to some bugs when a script sets the height style to the wrong value.

推荐答案

虽然这个答案听起来有些便宜，但我确实相信这是您正在寻找的答案。 ..

While this answer feels somewhat cheap, I truly believe it's the answer you're looking for...

您不能。

在CSS中的 img 上设置了高度后，HTML声明将立即被覆盖。 CSS中没有进一步的方法可以忽略该声明并使用HTML指定的高度，因为 initial 之类的东西是指CSS定义的属性（ 源），而不是关联的HTML属性。

Once you've set a height on the img in CSS, the HTML declaration gets immediately overridden. There is no way further along in the CSS to then ignore that declaration and use the HTML-specified height, because things like initial refer to CSS-defined properties (source), not associated HTML attributes.

有关此参考，请参见 CSS Height ，其中列出了所有属性值： ^{*忽略了实验性/非支持性值}

See this reference for CSS Height, which lists all Property Values: ^{*Experimental/non-supported values ommitted}

高度：自动| 长度 | ％|继承初始

如果尝试重新定义<$ c $的高度 $ c> img 使用上述任何一个属性值，它们将无法工作-我只是尝试了每一个来确定。

If you attempt to re-define the height of img using any of the above property values, they will not work - I've just tried each and every one to be sure.

• 长度 和％要求定义的高度，这似乎就是您要避免的确切内容

• length and % require a defined height, which seems to be the exact thing you're trying to avoid

initial 抓取以下CSS初始声明： height：auto;

initial will just grab the initial CSS declaration of height: auto;

继承没有祖先可以继承，因此回退到默认的 auto

inherit doesn't have an ancestor to inherit from, therefore it falls back to the default of auto

您唯一真正的选择是使用内联样式（如 Carter ）...

Your only real choice is to override the height in CSS, either using in-line styles (as suggested by Carter)...

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

---

或通过应用ID或类之类的选择器。 。

---

Or by applying selectors like ID's or classes...

<img id="my_image" />

#my_image {
    height: 150px;
}

---

或者，如果需要要使用JS自动生成覆盖，请考虑使用以下jQuery解决方案：

---

Or, if you need to use JS to auto-generate the overrides, consider something like this jQuery solution:

$("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; 。

This loops through all images on the page and applies a CSS height to match the HTML height. If there is no HTML height, it will use height: auto;.

这篇关于使用CSS删除高度自动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！