img {height:auto} is overriding height attribute in <img />

[maniqui]

Prologue

A well-known trick for quicker page rendering and better user experience is to explicitly set the height attribute of an img (i.e. <img height="30" src="..." />). This will avoid nasty "jumps" while the page is rendering if the height of an image (being downloaded) is known.

Problem is: afaik, the following rule makes it impossible to take advantage of that technique.

img {
  max-width: 100%;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

Weird as it sounds, It will override the inline attribute value.
I couldn't find any value for height (the CSS property, not the img property) to "undo" this.

I'm not sure the rationale for this particular property in the above rule, so I wonder if someone could shed some light, and a workaround/fix for this issue.

[mdo]

You can use the same trick with inline styles as the inline height attribute: style="height: 100px;".

[johnnypeck]

I'm curious about the rationale for this declaration as well. Why use a style declaration for every image rather than setting height and width attributes in the markup where appropriate.

[tobydeh]

Is there a reason for having img {height:auto} ?

[necolas]

Is there a reason for having img {height:auto} ?

When combined with max-width:100% it's needed to override any height attributes. Otherwise the height of the image won't scale down in proportion to the width.

[ShaggyDude]

this is true in some browsers. yes you need it.

[Charlie-Hua]

When combined with max-width:100% it's needed to override any height attributes. Otherwise the height of the image won't scale down in proportion to the width.

however, max-width:100% can be overwritten by max-width:none...
height:auto can't be overwritten and using style="height: 100px;" makes it not unobtrusive and hard to maintain...

[dmitry]

Already fixed in #2779, >= 2.0.3

[archonic]

Some of us deal with an environment that has thousands of images. Applying that style to all images with inline styling is unreasonable. Sometimes the images are produced from content submitted through tinyMCE as well.

[silvenon]

I agree, if we wanted height: auto we wouldn't set the height attribute. I had a long discussion about it and this seems like the best solution:

img {
  max-width: 100%;
}

/* https://github.com/csswizardry/inuit.css/pull/111#issuecomment-12562366 */
img[width],
img[height] {
  max-width: none;
}

This solution doesn't resort to :not(), so the support is fairly good.