今週末はついにシルバーウィークですね。
私は結婚式に出席するために台湾に行ってきます。

さて、旅行と言えば写真、写真といえば...というわけで
今回はIEで画像を縮小表示してもキレイに表示させるCSSについてです。

画像を掲載する際、原寸のままであれば問題ありませんが、
imgにwidthとheightを指定して縮小するとIEではガッタガタに表示されてしまいます。

ちなみに、表示にはこんなに違いがあります。

左がOpera、右がIEです。幅500pxの画像を150pxに縮小しています。

サムネイルを使用するECサイトやニュースサイトなどで、
サイズの違う写真をそれぞれ用意するのはとても面倒です。
そこで対策法としては...

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

imgにCSSを指定するだけ。

とても簡単です。

バイキュービック法という指定で画像を拡大縮小したときに
ピクセルを補間してくれています。

これで縮小表示をしてもキレイに表示されます。