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

user_208770 0
Viewed 48059

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.

compatibility-mode internet-explorer-8 css
6 Answers

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!

user_5454930

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.

user_8747480
Related