I’ve always been annoyed with how IE7 does image scaling. If you have an image that’s 100 X 100 and resize/scale it with HTML to 70 X 70 Internet Explorer doesn’t resample the image so it winds up looking “blocky”. I ran across a page on Flickr’s Developer Blog that describes a little known CSS command that will cause IE7 to do bicubic resampling of HTML scaled images. If you use a Mac, both Firefox and Safari do bicubic resizing automatically…. The way to apply this to every image on your page in CSS:
<style>
img{-ms-interpolation-mode:bicubic;}
</style>
IE7 example:
Original Image Size
Image Scaled with HTML to 100px width:
Image Scaled with HTML to 100px – Bicubic Resampling:
For IE6 You have to get a little crazy for minor improvement…
<span style="position: absolute; z-index: 100; width: 100px; display: inline-block; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.google.com/intl/en_ALL/images/logo.gif',sizingMethod='scale');"><img style=" filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" src="http://www.google.com/intl/en_ALL/images/logo.gif" border="0" alt="" width="100" /></span>
For more information on this IE6 fix check out Microsofts site: http://msdn.microsoft.com/en-us/library/ms532969.aspx
@Alex Glover
Full Size:
Bicubic is not working because the image you are using is a PNG:
Image saved as GIF:
Image saved as JPG:
You will need to save all your “spotlight” images as JPG and make the background color the same as the background of the site, or re-size the image to the exact dimensions you need.
Hi Aaron,
I’ve been working on a way to get an image to preview with js before it gets uploaded. this is so i can run a tool that allows the user to define a cropping area for thmbnailing or details. I have a script that works perfectly in FF but ie (happy to just have it work in v7) won’t reliably load local paths. sometimes it works but I think that’s for images that are in the browser cache already. I found a method where a blank image is on screen and the microsoft AlphaImageLoader pushes the local image to display as the blank image background. works great but the final step is the image needs to be displayed at a fixed width (while retaining correct aspect ratio) to fit on the viewing area.
the code for this is:
newPreview.filters.item(”DXImageTransform.Microsoft.AlphaImageLoader”).src = imgFile.value;
newPreview.filters.item(”DXImageTransform.Microsoft.AlphaImageLoader”).sizingMethod = ‘image’;
works great but the background image doesn’t scale back down along with its container.
have you tackled this problem before and won?
kind regards
Steve Bramley
Can you email/post a link to where you are working on this so I can take a look? I use the YUI image cropper when I need to crop. Don’t know if this would work for your purpose.
http://developer.yahoo.com/yui/examples/imagecropper/simple_crop.html
[...] cuanto a CSS podemos decir que existe un hack para IE que nos muestra las miniaturas con mejor calidad gracias al modo de interpolación [...]
This worked a treat to fix a problem I’ve been googling all morning, thank you!
[...] Image Resizing in Internet Explorer 7 and IE6 – [...]
I’m trying to use a background image for a new website but having problems with IE6, which doesn’t center the image. Can you help?
http://www.americanamedia.com/test/young/index_new.asp
David
David I sent an example page based on the link you emailed me.
Strangely, this css is not working for my site in IE7. I tried it in my regular stylesheet and in my IE stylesheet.
I added to the original post above. Apparently this CSS command only works on JPG images.
[...] Image Resizing in Internet Explorer 7 and IE6 | Aaron Pearson I’ve always been annoyed with how IE7 does image scaling. If you have an image that’s 100 X 100 and resize/scale it with HTML to 70 X 70 Internet Explorer doesn’t resample the image so it winds up looking “blocky”. I ran across a page on Flickr’s Developer Blog that describes a little known CSS command that will cause IE7 to do bicubic resampling of HTML scaled images. If you use a Mac, both Firefox and Safari do bicubic resizing automatically…. The way to apply this to every image on your page in CSS: Tags: scale image ie [...]