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 in IE7 and IE8?

Answer 1

Use width: inherit; to make it work with pure CSS in IE8. (See responsive-base.css.) Like this:

img {
  width: inherit;  /* This makes the next two lines work in IE8. */
  max-width: 100%; /* Add !important if needed. */
  height: auto;    /* Add !important if needed. */
}

I'm not sure if that works in IE7—please test it and let us know if you're testing IE7. Before I figured out the width: inherit technique I was using the jQuery below, so you could try it if you really need support down to IE7 and the first technique doesn't work:

<!--[if lt IE 9]><script>
jQuery(function($) {
    $('img').each(function(){
        // .removeAttr supports SSVs in jQuery 1.7+
        $(this).removeAttr('width height');
    });
});
</script><![endif]-->