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

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

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