How to auto resize the image for responsive design

Question

I have tried to auto resize the image using the CSS property max-width, but it does't work in IE7 and IE8. Is there any way to auto resize the image with pure CSS in IE7 and IE8?

Answer 1

Try something like this:

width: expression(document.body.clientWidth > 800 ? "800px" : "auto" );

/* If page is wider than 800px then set width to 800px, otherwise set to auto */

Source (worth taking a look at)

Answer 2

As you also want support for media queries..You can use the following polyfill to add support for media queries to IE6-IE8

https://github.com/scottjehl/Respond (very small in size, just 1-2kb minified and gzipped) then use the following css:

@media screen and (min-width: 480px){
    img{
     max-width: 100%;
     height: auto;
   }
}