Responsive images in IE8, height isn't adjusted [#1782090]

Responsive images in IE8 adjust there width correctly but their height just gets stretched rather than scaling down with the width.

To fix this the CSS making the images responsive in normalize.css needs to have the following declaration added:

width: auto;

normalize.css

img {
  border: 0; /* 1 */
  -ms-interpolation-mode: bicubic; /* 2 */

  /* vertical-align: bottom; */ /* Suppress the space beneath the baseline */

  /* Responsive images */
  /* @todo Add responsive embedded video. */
  max-width: 100%;
  height: auto;
  width: auto;
}

Comment	File	Size	Author
#3	ie8-image-scaling-1782090-3.patch	832 bytes	echoz
#1	ie8-image-scaling-1782090-1.patch	1.23 KB	echoz
	responsive-images-ie8-comparison.JPG	23.85 KB	jamiemagique

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

echoz CreditAttribution: echoz commented 14 September 2012 at 09:06

Version:	7.x-5.1	» 7.x-5.x-dev
Status:	Active	» Needs review

File	Size
ie8-image-scaling-1782090-1.patch	1.23 KB

Yep, this is an ie8 only bug (not in 7) when the img element has a max-width set, the height doesn’t scale down when resized. Setting width: auto; does fix it (and apparently so does removing img height + width attributes via js, which is contrary to a D7.9 update that "restored height/width attributes on images").

I didn't find this fix in many of the common responsive frameworks I assume, because IE 8 is not made responsive, however, it does fix another bug with almost identical conditions - Using max-width on images can make them disappear in IE8.

I would rather feed IE8 a desktop layout #1539682: Turn off Respond.js by default, use .lt-ie9 rules for IE8 layouts, where it wouldn't be responsive, but this would support that choice, or flexible columns within a desktop layout.

At any rate, I'm open to a "won't fix", and Jamie, certainly this is your custom fix.