Dev Notes

Various Cheat Sheets and Resources by David Egan/Carawebs.

Responsive Images in IE 8


IE8, LESS
David Egan

Images can be made responsive, while retaining aspect ratio with:


.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

However IE8 doesn’t like max-width: 100%.

One way to deal with this is to put IE styles into a @media block, so that they are only applied to certain versions of IE.

This is hacky - most browsers don’t parse the code as they recognise the \ and characters.

This code block is only applied by IE 6, 7 & 8:

/* Add a different img width for IE 8 and lower */
@media \0screen\,screen\9 {
    img-responsive {
        width: auto;
    }
}

This doesn’t work in LESS, but we can hack the hack by declaring a LESS variable and using that:

@iehack: \0screen\,screen\9;

@media @iehack {
    .img-responsive {
        width: auto;
    }
}

It may be a bit hacky, but it gets the job done. Hopefully it won’t be needed for much longer as these old browsers drop off the face of the internet.

Resources


comments powered by Disqus