Remove height auto using css

user_179545 0
Viewed 35400

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.

height css html
6 Answers

You can override height with:

height: unset;

Browser support is all except IE

user_24707650

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

user_71625830
Related