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.

Answer 1

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

width: auto;

then it works.

Answer 2

set width:inherit for ie8

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

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!

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.

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

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