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

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