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

html css image scaling

39,630

Solution 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]-->

Solution 2

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)

Solution 3

You need a one-time cached expression for IE 6-7.

IMG {
zoom:expression(
    function(t){
        t.runtimeStyle.zoom = 1;
        var maxW = parseInt(t.currentStyle['max-width'], 10);
        var maxH = parseInt(t.currentStyle['max-height'], 10);
        if (t.scrollWidth > maxW && t.scrollWidth >= t.scrollHeight) {
            t.style.width = maxW;
        } else if (t.scrollHeight > maxH) {
            t.style.height = maxH;
        }
    }(this)
);
}

Example: http://kizu.ru/lib/ie/minmax.html JS source file: http://kizu.ru/lib/ie/ie.js

Author: Roman Komarov

Solution 4

Doesn't IE 7&8 recognise the following:

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

Solution 5

Most web-developers know that IE has fallen behind in the race for standards and being able to show the latest and greatest. Many CSS2 properties are unsupported. Some of the more useful ones, are properties such as max-width, max-height, min-width and finally min-height. Try this:

<html>
<style>
p {
border:1px solid red;
width:expression( 
    document.body.clientWidth > (500/12) * 
    parseInt(document.body.currentStyle.fontSize)?
        "30em":
        "auto" );
}
</style>
<body>
<p>
[alot of text]
</p>

View more solutions

39,630

Author by

Viduthalai

Frond End Developer / Web Designer

Updated on April 20, 2020

Comments

Viduthalai about 4 years

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?
FelipeAls over 12 years

Though I despise IE and/or MS for different reasons, one of them being that I had to make designs work for IE6/7 :), I don't think that IE10 "has fallen behind in the race for standards". They're or will be back.
Jeremy Glover almost 12 years

You saved my life. Thank you! This worked perfectly in IE 8. I did not try in IE 7 since we don't have to support it.
ryanve almost 12 years

@JeremyGlover Awesome, yea I knew there had to be a way—I'd tried a bunch of things and width:inherit is what did the trick.