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

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