How to auto resize the image for responsive design with pure css?

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

Answer 1

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

Answer 2

Doesn't IE 7&8 recognise the following:

#my-div img
      {
         max-width:100%;
         _max-width:100%;
      }