My page contains an image, as in the example below. The width of the image depends on the width and height of the browser, which changes automatically (something like).
This image looks beautiful after resizing in all browsers except IE (I tested in IE7 and IE6). In IE, the image looks ugly. Some parts are thicker than they should be, and some parts are thinner.
alt text http://img39.imageshack.us/img39/7202/88017917.png
I am pretty sure that this is because IE does not use anti-aliasing. But I wonder how to solve this unpleasant problem?
I don't have ie7, but this code should work fine. But how to fix it for ie6?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
img { -ms-interpolation-mode:bicubic; }
</style>
</head>
<body>
<div style="width: 50%;">
<img src="pp.jpg" width="100%">
</div>
</body>
</html>
From flickr devs:
IE 6 , , CSS AlphaImageLoader , PNG -. , : ProgID: DXImageTransform.Microsoft.AlphaImageLoader(src= '///image.jpg', sizingMethod = '');. , .
, . - ?