IE8 non-compatibility mode, image with max-width and height:auto

Question

I have an image with this markup

<img src="wedding_00.jpg" width="900" height="600" />

And I am using CSS to downsize it to 600px width, like so:

img {
    max-width:600px;
    height:auto;
}

Can anyone explain why this method works in Compatibility mode, but not in standard mode? Is there a way I can modify my CSS so that it will work in standard mode?

I realize that if I strip out the

width="900" height="600"

that it solves the problem, but that is not an option I have.

Offenseless

Answer 1

I'm not sure of the root cause but if you add

width: auto;

then it works.

Ramonaramonda

brilliant, works perfectly. I don't think I would have tried that in a million years. – Offenseless

@JaredHenderson your comment made my day – Uncompromising

It doesn't work for width:50%; So it's not a real solution for that IE8 bug. Anyone have some clue to resolve the issue? img { width:50%; max-width: Npx; } – Astylar

Resolve for me previous comment: zeilenwechsel.de/it/articles/5/How-max-width-fails-in-IE8.html – Astylar

I keep coming back to this post every few weeks when I hit the issue on a new site. Would upvote it each time if I could... – Hanger

Answer 2

set width:inherit for ie8

 img {
   width:inherit; //for ie8
   max-width: 100%;
   height: auto;
 }

Omniscience

I just had an issue where the image inside a container-div with "max-height:90%;" did not resize in internet explorer(all versions) until that said div also had the "height:inherit;" property. – Classical

Answer 3

Wow, saved me a lot of time there!

i had a similar problem with an image in position: absolute where width was magically taking max-width value. Its weird because it doesn't do that when the image wasn't in position: absolute.

width: auto; 
max-width: 200px; 
height: auto; 
max-height: 200px;

works great in IE8!

Gaze

Answer 4

Wow, what a pain IE always seems to be. Although there is an accepted answer, I found that it did not solve my problem.

After much search I found that the way to fix it is to remove the height and width attributes from the images in question. An explanation can be found here: Scaling Images in IE8 with CSS max-width

The code is as follows:

CSS:

.entry img {
    max-width:615px
    height:auto;
}

SCRIPT

var imgs, i, w;
var imgs = document.getElementsByTagName( 'img' );
for( i = 0; i < imgs.length; i++ ) {
    w = imgs[i].getAttribute( 'width' );
    if ( 615 < w ) {
        imgs[i].removeAttribute( 'width' );
        imgs[i].removeAttribute( 'height' );
    }
}

Now I tend to use jQuery as much as possible, to solve this I used a few different functions to target IE8 and make my life easier. I also found that the solution almost worked, but not quite. I toyed around with it until I was able to achieve the results I was looking for. My solution is as follows:

JQUERY:

var maxWidth = 500;

function badBrowser(){
if($.browser.msie && parseInt($.browser.version) <= 8){
    return true;
}   
    return false;
}


if(badBrowser()){
    $('img').each(function(){
        var height = $(this).height();
        var width = $(this).width();
        if (width > maxWidth) {

            var ratio = (maxWidth /width)  
            $(this).css({
                "width":maxWidth,               
                "height":(ratio*height)
            });
            $(this).removeAttr('width'); 
            $(this).removeAttr('height');
        }else{
            $("#cropimage").css({
                "width":width,               
                "height":height
            });
        }
    });       
}

I use this to target a specific image load function, but it could be added to any document ready or window load function as well.

Frontward

Answer 5

My solution for this issue was:

  <!--[if IE 8]>
  <style>
   a.link img{
          max-height:500px ;
          width:auto !important;
          max-width:400px;
          height:auto !important;
          width:1px; 

        }
  </style>
  <![endif]-->  

Jelly

Answer 6

max-width of images just work fine on IE8 when it's directly wrapper (div) has width.

Example:
The image in this example is 700px; The web's width is 900px;

<div class="wrapper1"><div class="wrapper2"><img style="max-width: 100%;" src="abc.jpg" alt="Abc" /></div></div>

if you style: .wrapper1 { width: 50%; float: left; } // this column's width is 450px max;

The image still 700px and make the layout broken.

Solution: .wrapper1 { width: 50%; float: left; } // this column's width is 450px max; .wrapper2 { width 100%; float: left; } // if it has border or padding, width will smaller 100%

The the image will fit the column (image = 450px) when resize window smaller, image will smaller based on wrapper2's width.

Regards,
Cuong Sky

Headache