CSS: Resizing Large Images to Fit in Containers (also work in MSIE!)
March 28, 2005 by daynah
Filed under CSS, Scripts and Coding
In my post about CSS: Resizing Large Images to Fit in Containers, I hadn’t noticed that the CSS2 code, “max-width” didn’t work in MS Internet Explorer. So I looked around and found this nice piece of code from Ozone Asylum Forums (based on this article).
So to make an image resize in MSIE, use this CSS Code.
<head>
<style type=”text/css”>
.resizeImage {
/* for Firefox, Opera and others: */
max-width: 250px;
}
</style>
<!–[if gte IE 5]>
<style type=”text/css”>
.resizeImage {
/* For Internet Explorer: */
width: expression(Math.min(parseInt(this.offsetWidth), 250 ) + “px”);
}
</style>
<![endif]–>
</head>
<body>
<img src=”myimage.jpg” class=”resizeImage” alt=”my image” />
</body>
</html>
So that’s how you get the ‘max-width’ CSS property to work in Internet Explorer? …You don’t. ;) Just use width and the Javascript trick! Thank you for pointing this out to me how max-width didn’t work in MSIE, John Adams.
Resources: Ozone Asylum Forums, svendtofte.com.
@
