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

Doesn't IE 7&8 recognise the following:

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

Answer 2

Use max-width: 100% with height:auto, plus width:auto for IE8:

img 
 {
 max-width: 100%;
 height: auto;
 }

/* Media Query to filter IE8 */
@media \0screen 
  {
  img 
    { 
    width: auto;
    }
  }