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

• IE Specific code blocks in media queries
• http://stackoverflow.com/questions/17699588/viewport-media-and-less/17699986#17699986