CODEWITHSUNDEEP
htmlcssimagescaling
Viduthalai
Viduthalai

Reputation: 158

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

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?

Upvotes: 10

Views: 40360

Answers (8)

Ali Adravi
Ali Adravi

Reputation: 22823

I tested it and working for every browser

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

Upvotes: 0

Lucky Soni
Lucky Soni

Reputation: 6888

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

Upvotes: 0

Paul Sweatte
Paul Sweatte

Reputation: 24637

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

Upvotes: 0

ryanve
ryanve

Reputation: 52591

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

Upvotes: 14

Tracy
Tracy

Reputation: 105

Doesn't IE 7&8 recognise the following:

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

Upvotes: 2

Nick Sadovnikov
Nick Sadovnikov

Reputation: 86

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

Upvotes: 2

kapillohakare
kapillohakare

Reputation: 900

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>

Upvotes: 1

grc
grc

Reputation: 23585

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)

Upvotes: 2

Related Questions