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

You can use inline css to override your other css. The img height does not override the css because it's html so you need to use <img src="..." width="350" style="height:150px;" />

Answer 2

Best Practice is not to globally define all img tags with overriding height. I would if you can, change that declaration to:

img.auto-height {
  height: auto;
}

And anywhere you need to have an auto height on an image then add class="auto-height"

Answer 3

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

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

---

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

<img id="my_image" />

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

Answer 4

You can override height with:

height: unset;

Browser support is all except IE

Answer 5

While it's not exactly removing, there's a couple other ways you could try and work around it.

• Adjust the height via the parent

div img { height: 150px; }

• Or with a 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">