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?

`expression` are just `javaScript` inside a stylesheet, it won't work if the user turns `javaScript` down. Thus you'd better use javaScript instead to keep your stylesheet clean — steveyang, Nov 18 '11 at 05:58
yeah steven you're correct, I think using javscript is better instead of using unclean css. — Viduthalai, Nov 18 '11 at 06:27
The [`max-width` property is indeed supported by IE7 (and IE8)](http://www.quirksmode.org/css/contents.html). Difficult to say why it's not working for you without seeing your code. To get high quality scaling in IE7 & IE8, you need to add `AlphaImageLoader` with `sizingMethod="scale"`, but that's not needed to get images to scale, just to improve appearance. — steveax, Nov 18 '11 at 18:16
Thank you so much for all , now in ie8 and ie7 max-width working well meanwhile for responsive design in @media queries not working in ie7 and ie8. if you have any better solution please suggest me. — Viduthalai, Nov 21 '11 at 09:42

ryanve · Answer 1 · 2012-06-21T10:37:03.910

14

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

edited Jun 21 '12 at 10:37

answered Jan 12 '12 at 04:34

ryanve

50,076
30
102
137

1

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. – Jeremy Glover Jun 20 '12 at 12:58
1

@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. – ryanve Jun 21 '12 at 10:29

score 2 · Answer 2 · answered Apr 10 '12 at 11:09

2

Doesn't IE 7&8 recognise the following:

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

answered Apr 10 '12 at 11:09

Tracy

105
5

score 2 · Answer 3 · answered Nov 18 '11 at 05:07

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)

answered Nov 18 '11 at 05:07

grc

22,885
5
42
63

score 2 · Answer 4 · edited May 23 '17 at 11:45

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

score 1 · Answer 5 · answered Nov 18 '11 at 05:08

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>

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. — FelipeAls, Nov 18 '11 at 06:41

score 0 · Answer 6 · answered Dec 30 '12 at 16:26

0

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

answered Dec 30 '12 at 16:26

Paul Sweatte

24,148
7
127
265

Lucky Soni · Answer 7 · 2013-01-29T07:31:44.210

0

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

edited Jan 29 '13 at 07:31

answered Jan 29 '13 at 07:23

Lucky Soni

6,811
3
38
57

score 0 · Answer 8 · answered Apr 19 '15 at 14:22

0

I tested it and working for every browser

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

answered Apr 19 '15 at 14:22

Ali Adravi

21,707
9
87
85

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

8 Answers8

Linked