Images don't resize in IE8 [#1711024]

For some reason, images aren't resizing in IE8. This is working in modern browsers, and in IE9.

Here's the CSS:

div.field-banner-image img,
div.field-banner-image source { 
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
	}

I even tried adding the following:

div.field-banner-image {
	width: 100%;	
}

Here's the HTML that's output:

 <div class="field-banner-image">
    <picture alt="Children play with farm animals" title="A goose inspects farmyard fun at the Summer Festival">
<!-- <source  class="resp-img-picture" typeof="foaf:Image" src="/sites/default/files/styles/hero-mobile/public/styles/summer-fest-goose.jpg" width="320" height="108" alt="Children play with farm animals" title="A goose inspects farmyard fun at the Summer Festival"  /> -->
<source  class="resp-img-picture" typeof="foaf:Image" src="/sites/default/files/styles/hero-mobile/public/styles/summer-fest-goose.jpg" width="320" height="108" alt="Children play with farm animals" title="A goose inspects farmyard fun at the Summer Festival"  />
<!-- <source media="(min-width: 0px)" srcset="/sites/default/files/styles/hero-mobile/public/styles/summer-fest-goose.jpg 1x, /sites/default/files/styles/hero-mobile2x/public/styles/summer-fest-goose.jpg 2x"  class="resp-img-picture resp-img-picture-mobile" typeof="foaf:Image"  width="320" height="108" alt="Children play with farm animals" title="A goose inspects farmyard fun at the Summer Festival"  /> -->
<source media="(min-width: 0px)" srcset="/sites/default/files/styles/hero-mobile/public/styles/summer-fest-goose.jpg 1x, /sites/default/files/styles/hero-mobile2x/public/styles/summer-fest-goose.jpg 2x"  class="resp-img-picture resp-img-picture-mobile" typeof="foaf:Image"  width="320" height="108" alt="Children play with farm animals" title="A goose inspects farmyard fun at the Summer Festival"  />
<!-- <source media="all and (min-width: 20em)" srcset="/sites/default/files/styles/hero-mobileland/public/styles/summer-fest-goose.jpg 1x, /sites/default/files/styles/hero-mobileland2x/public/styles/summer-fest-goose.jpg 2x"  class="resp-img-picture resp-img-picture-mobileland" typeof="foaf:Image"  width="480" height="161" alt="Children play with farm animals" title="A goose inspects farmyard fun at the Summer Festival"  /> -->
<source media="all and (min-width: 20em)" srcset="/sites/default/files/styles/hero-mobileland/public/styles/summer-fest-goose.jpg 1x, /sites/default/files/styles/hero-mobileland2x/public/styles/summer-fest-goose.jpg 2x"  class="resp-img-picture resp-img-picture-mobileland" typeof="foaf:Image"  width="480" height="161" alt="Children play with farm animals" title="A goose inspects farmyard fun at the Summer Festival"  />
<!-- <source media="all and (min-width: 30em)" srcset="/sites/default/files/styles/hero-mobilewide/public/styles/summer-fest-goose.jpg 1x, /sites/default/files/styles/hero-mobilewide2x/public/styles/summer-fest-goose.jpg 2x"  class="resp-img-picture resp-img-picture-mobilewide" typeof="foaf:Image"  width="740" height="249" alt="Children play with farm animals" title="A goose inspects farmyard fun at the Summer Festival"  /> -->
<source media="all and (min-width: 30em)" srcset="/sites/default/files/styles/hero-mobilewide/public/styles/summer-fest-goose.jpg 1x, /sites/default/files/styles/hero-mobilewide2x/public/styles/summer-fest-goose.jpg 2x"  class="resp-img-picture resp-img-picture-mobilewide" typeof="foaf:Image"  width="740" height="249" alt="Children play with farm animals" title="A goose inspects farmyard fun at the Summer Festival"  />
<!-- <source media="all and (min-width: 46.5em)" srcset="/sites/default/files/styles/hero-tabport/public/styles/summer-fest-goose.jpg 1x, /sites/default/files/styles/hero-tabport2x/public/styles/summer-fest-goose.jpg 2x"  class="resp-img-picture resp-img-picture-tabport" typeof="foaf:Image"  width="550" height="185" alt="Children play with farm animals" title="A goose inspects farmyard fun at the Summer Festival"  /> -->
<source media="all and (min-width: 46.5em)" srcset="/sites/default/files/styles/hero-tabport/public/styles/summer-fest-goose.jpg 1x, /sites/default/files/styles/hero-tabport2x/public/styles/summer-fest-goose.jpg 2x"  class="resp-img-picture resp-img-picture-tabport" typeof="foaf:Image"  width="550" height="185" alt="Children play with farm animals" title="A goose inspects farmyard fun at the Summer Festival"  />
<!-- <source media="all and (min-width: 55.5em)" srcset="/sites/default/files/styles/hero-tabland/public/styles/summer-fest-goose.jpg 1x, /sites/default/files/styles/hero-tabland2x/public/styles/summer-fest-goose.jpg 2x"  class="resp-img-picture resp-img-picture-tabland" typeof="foaf:Image"  width="800" height="269" alt="Children play with farm animals" title="A goose inspects farmyard fun at the Summer Festival"  /> -->
<source media="all and (min-width: 55.5em)" srcset="/sites/default/files/styles/hero-tabland/public/styles/summer-fest-goose.jpg 1x, /sites/default/files/styles/hero-tabland2x/public/styles/summer-fest-goose.jpg 2x"  class="resp-img-picture resp-img-picture-tabland" typeof="foaf:Image"  width="800" height="269" alt="Children play with farm animals" title="A goose inspects farmyard fun at the Summer Festival"  />
<!-- <source media="all and (min-width: 65em)" srcset="/sites/default/files/styles/hero-desk/public/styles/summer-fest-goose.jpg 1x, /sites/default/files/styles/hero-desk2x/public/styles/summer-fest-goose.jpg 2x"  class="resp-img-picture resp-img-picture-desk" typeof="foaf:Image"  width="825" height="277" alt="Children play with farm animals" title="A goose inspects farmyard fun at the Summer Festival"  /> -->
<source media="all and (min-width: 65em)" srcset="/sites/default/files/styles/hero-desk/public/styles/summer-fest-goose.jpg 1x, /sites/default/files/styles/hero-desk2x/public/styles/summer-fest-goose.jpg 2x"  class="resp-img-picture resp-img-picture-desk" typeof="foaf:Image"  width="825" height="277" alt="Children play with farm animals" title="A goose inspects farmyard fun at the Summer Festival"  />
<!-- <source media="all and (min-width: 73.5em)" srcset="/sites/default/files/styles/hero-wide/public/styles/summer-fest-goose.jpg 1x, /sites/default/files/styles/hero-wide2x/public/styles/summer-fest-goose.jpg 2x"  class="resp-img-picture resp-img-picture-wide" typeof="foaf:Image"  width="870" height="293" alt="Children play with farm animals" title="A goose inspects farmyard fun at the Summer Festival"  /> -->
<source media="all and (min-width: 73.5em)" srcset="/sites/default/files/styles/hero-wide/public/styles/summer-fest-goose.jpg 1x, /sites/default/files/styles/hero-wide2x/public/styles/summer-fest-goose.jpg 2x"  class="resp-img-picture resp-img-picture-wide" typeof="foaf:Image"  width="870" height="293" alt="Children play with farm animals" title="A goose inspects farmyard fun at the Summer Festival"  />
<!-- <source media="all and (min-width: 91.5em)" srcset="/sites/default/files/styles/hero-huge/public/styles/summer-fest-goose.jpg 1x, /sites/default/files/styles/hero-huge2x/public/styles/summer-fest-goose.jpg 2x"  class="resp-img-picture resp-img-picture-huge" typeof="foaf:Image"  width="950" height="320" alt="Children play with farm animals" title="A goose inspects farmyard fun at the Summer Festival"  /> -->
<source media="all and (min-width: 91.5em)" srcset="/sites/default/files/styles/hero-huge/public/styles/summer-fest-goose.jpg 1x, /sites/default/files/styles/hero-huge2x/public/styles/summer-fest-goose.jpg 2x"  class="resp-img-picture resp-img-picture-huge" typeof="foaf:Image"  width="950" height="320" alt="Children play with farm animals" title="A goose inspects farmyard fun at the Summer Festival"  />
<noscript><img  class="resp-img-picture" typeof="foaf:Image" src="/sites/default/files/styles/hero-mobile/public/styles/summer-fest-goose.jpg" width="320" height="108" alt="Children play with farm animals" title="A goose inspects farmyard fun at the Summer Festival" /></noscript>
</picture>  </div>

I've tried changing the media queries to use px instead of em. Same result.

I was using screen instead of all in the MQ before. Same result.

The CSS works fine in making the image fill the width if I just put a standard img in there.

I'm at a loss. It seems that somehow that matchmedia is probably failing here, but not sure how or why. Not sure if this would work on a standard HTML page outside of Drupal. I suppose that's something to try next. If anybody has suggestions, I'm open to them!

Comments

Comment #1

attiks commented 5 August 2012 at 19:33

Assigned:

Unassigned

» jelle_s

probably related to matchmedia.js, we maybe need to look at another solution to handle media queries in older browsers

Comment #2

attiks commented 5 August 2012 at 19:54

possible solution, but untested, at https://github.com/benschwarz/matchMedia.js/tree/IE7-8

Comment #3

rainbowarray

she/her

English

Twin Cities, Minnesota

commented 6 August 2012 at 14:13

Tried it.

Good news. The image gets bigger and smaller as the browser resizes!

Bad news! Displays mobile layout at all sizes in IE8.

So that's a problem.

Comment #4

attiks commented 6 August 2012 at 18:37

code referenced in #2 only supports a small subset and only for style elemts, so no combined MQ and no @import styles, for the moment no idea on how to solve this, assuming it is possible to solve.

Comment #5

attiks commented 15 August 2012 at 15:09

@marc can you try with really easy media queries (pnly use min-width)

Comment #6

attiks commented 19 October 2012 at 14:29

Version:	7.x-2.0-beta2	» 7.x-2.x-dev
Assigned:	jelle_s	» Unassigned
Status:	Active	» Closed (works as designed)

Images don't resize in IE8

Comments

Comment #1

Comment #2

Comment #3

Comment #4

Comment #5

Comment #6

News items

Our community

Documentation

Drupal code base

Governance of community