2009-05-16 25 views
3

マイページには、下の例のような画像が含まれています。画像の幅はブラウザの幅と高さに依存し、自動的に変更されます。IEで画像を拡大する

この画像は、IEを除くすべてのブラウザ(IE7とIE6でテスト済み)でサイズを変更した後にうまく見えます。 IEイメージでは醜いように見えます。いくつかの部分は厚くなければならず、いくつかの部分は薄い。

alt text http://img39.imageshack.us/img39/7202/88017917.png

私は平滑化を使用していないIEが原因であることはほぼ確信しています。しかし、私はこの不愉快な問題を解決する方法を疑問に思う?


ie7はありませんが、このコードは正常に動作するはずです。しかし、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は、リスクの高い提案であるが、 AlphaImageLoaderのCSSフィルタは、一般に適切 とPNG画像を表示するため を使用したものと同じフィルタを 印加されたとき を表示改善された画像をリサイズすることができアルファ透明度。たとえば、 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src = '/ path/to/image.jpg'、 sizingMethod = 'scale');.ここでは の透明度は適用されませんが、 リサイズ方法を適用すると、 の結果がより高品質になります。

実際にはフィルタを使用していません。誰でも私に作業コードを与えることができますか?

+0

ブラウザを使用して画像を拡大すると、一貫した結果が得られません。 – Nik

答えて

1

Unstoppable Robot Ninjaには、IE6とIE7で動作させるための情報といくつかのコードを含む記事があります。

問題はIE固有ではなく、プラットフォーム固有です。 Firefox、Safariなどはすべて独自のレンダリングエンジンを使用し、ネイティブWindowsのスケーリングよりもはるかにスムーズにスケーリングできます。

CSS宣言またはJavaScriptコードをConditional Commentsに追加することをお勧めします。そのため、IE以外のブラウザでは、余分なコードをダウンロードしたり、別のリクエストを行う必要はありません。これはあなたのCSSを清潔で有効なものにします。

+0

これはそれです!ありがとう! – Roman

5

ジョエル・スポルスキは最近、このブログでこれに対する解決策を掲載: http://www.joelonsoftware.com/items/2008/12/22.html

をCSSに以下を追加します。

img { -ms-interpolation-mode:bicubic; } 

最適なソリューションをスケーリングする必要はありません画像を使用することですブラウザでは、CSS Joelは大きな改善を提案しています。

+0

hm ..私は試しても動作しません:(誰も私に実例を教えてもらえますか?) – Roman

+0

私はIE6を使いこなすのに便利ですが、Joelの記事は、それは私のために働いていた。 – RichieHindle

+0

@ RichieHindle:私はちょうど本物のオリジナル記事(Joelが参考にしました)を持っていて、それがie7で動作するフィルターがないのでie6のためにいくつかのフィルターを使うべきであると悲しんでいました。) – Roman