Posts Tagged ‘CSS’

Thursday, January 15th, 2009

Image Resizing in Internet Explorer 7 and IE6

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:




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='',sizingMethod='scale');"><img style=" filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" src="" border="0" alt="" width="100" /></span>

For more information on this IE6 fix check out Microsofts site:

@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.