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;
}

Comments

Version:7.x-5.1» 7.x-5.x-dev
Status:Active» Needs review
StatusFileSize
new1.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.

I can confirm that this patch fixes the issue for me in ie8. Thanks a lot!

-EDIT-
However, I agree that there appear to be more serious issues with zen 7.x-5.x responsive layouts and ie8 that go well beyond this bug.

StatusFileSize
new832 bytes

Re-rolled against current dev.

Status:Needs review» Fixed

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.