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

Created on 10 Feb 2012 · 9Comments · Source: twbs/bootstrap

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.

Source

maniqui

Most helpful comment

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

mdo on 12 Feb 2012

❤4

All 9 comments

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

mdo on 12 Feb 2012

❤4

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.

johnnypeck on 19 Feb 2012

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

tobydeh on 9 Mar 2012

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.

necolas on 9 Mar 2012

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

ShaggyDude on 9 Mar 2012

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

Charlie-Hua on 22 Mar 2012

Already fixed in #2779, >= 2.0.3

dmitry on 28 Mar 2012

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.

archonic on 17 Apr 2013

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.