Remove height auto using css

Question

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

How to reset/override this property using cs

Answer 1

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

---

You can't.

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.

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

height: auto | length | % | inherit | initial

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 will just grab the initial CSS declaration of height: auto;

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

---

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

---

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

#my_image {
    height: 150px;
}

---

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
});

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;.