20

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 css so that the html height comes into effect?

Html:

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

Css:

img { height: auto; }

JSFiddle

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.

Improve this question
6
  • Note for people playing around with linked JSFiddle: comments starting with // are not valid in CSS, so the declarations you put in second img style won't count if you put them after the original comment. Commented May 16, 2017 at 20:12
  • Can you include a little bit more of the markup? Like a parent div, etc. Might be able to adjust some of these images the way. Commented May 16, 2017 at 20:15
  • If I'm correct in assuming that you don't want to manually override the heights back to their HTML originals using CSS, then I don't think that's possible. Commented May 16, 2017 at 20:15
  • In my opinion the generic declaration of an image tag without a class selector overriding the height is not the best practice. If anything .img-height-auto should define the styling and when auto height override is needed it should be added to the img tag such as class="img-height-auto" Commented May 16, 2017 at 20:16
  • I was kinda certain that this is not possible with CSS but for all these years CSS never ceased to surprise me so I said let me take a shot at this :D Commented May 16, 2017 at 20:23

7 Answers 7

Reset to default
18

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thank you, i'll accept this as I'm now certain of the limitation. I will read the height property using js and force it using style and hope it doesn't cause any bugs with other script as I'm in an unpredictable environment (as detailed in the question)
@UnLoCo Appreciate it. I've edited my answer to include a jQuery solution in the event it helps you!
6

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;" />

Improve this answer

5 Comments

As I understood it, OP was trying to "ignore" the CSS height, rather than simply re-specifying. Again, this is only my interpretation, but in the event OP has 100 images that have set HTML heights, he wants to use those as overrides in one fell swoop. Like a CSS height: ignore-CSS-and-use-HTML property, for lack of a better explanation.
@Santi I thought that might be the case, but I didn't have enough rep to comment so I just went with this answer.
Understood, I suppose we'll see. Either way, your suggestion is an answer, OP may just have left the door open a bit more than intended. Then again, it could be exactly what he/she is looking for!
I vote up your answer fow now, I will provide more info about my case in the question
I aslo up-voted you because indeed it's a valid solution and one I have used for other reasons on many occasions.
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"

Improve this answer

2 Comments

voted up but I don't control the environment unfortunately!
what a bummer :(
2

You can override height with:

height: unset;

Browser support is all except IE

Improve this answer

2 Comments

This doesn't work. It reverts the height to initial which as the answer above says gives it height: auto.
"all except IE"... simple solution ihateinternetexplorer.com
1

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

Improve this answer

Comments

0

If you're applying that lazy loading to all your images, then you could set that image "auto" size only once the lazy magic is applied:

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

in the meantime the real img is loaded, html attribute height="X" will be applied, that is expected to be much more close to the real image dimensions.

Another hack that helps me avoid that shift effect is to use a base64 image placeholder with a ratio closer to the final images (normally a 2:1 will fit better in most of the cases than a 1:1 square pixel).

Improve this answer

Comments

0

Similar to J. Alba's answer, I've gone with:

img:not(.no-height-auto) { height: auto; }

So, that means most images get height auto, which is what I normally want:

<!-- this gets height:auto --> <img src="my-img.jpg" height="600" width="800" />

But if I don't want a particular image to have height auto, I add the class:

<!-- this gets height 600px from the attribute --> <img src="my-img.jpg" class="no-height-auto" height="600" width="800" />
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.