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:
Make: Electronics (Learning by Discovery)"This is teaching at its best!"
--Hans Camenzind, inventor of the 555 timer (the world's most successful integrated circuit), and author of... Read More >
(3 Packs) iPhone 4 Anti-Glare, Anti-Scratch, Anti-Fingerprint - Matte Finishing Screen ProtectorProtect your iPhone 4 screen with anti-glare screen protector. Our screen protector feature full front protection for iPhone 4 screen. Protect your iPhone 4 screen with HHI screen protectors today.
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% [?]
@
