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.
Related Products:
How to Diagnose and Fix Everything ElectronicMaster the Art of Electronics Repair In this hands-on guide, a lifelong electronics repair guru shares his tested techniques and invaluable insig... Read More >
HDMI Cable 2M (6 Feet)Perfect for connecting your HDTV, DVD/Blu-Ray players, gaming systems, and other home theater/entertainment components.These HDMI cables are ATC (Authorized Testing Center) certified, meaning you can count on them to pass a high-definition signal up to 1080p.
Kindle Fire, Full Color 7" Multi-touch Display, Wi-FiMovies, apps, games, music, reading and more, plus Amazon's revolutionary cloud-accelerated web browser - 18 million movies, TV shows, songs, magazine... Read More >
Popularity: 13% [?]
@
