画像をCSSだけでハイクオリティに縮小サムネイル化する方法:phpspot開発日誌

Tip: High quality CSS thumbnails in IE7 ・Devthought 画像をCSSだけでハイクオリティに縮小サムネイル化する方法が紹介されています。 普通、IEで、img に対して、width, height 指定すると、画像が汚く縮小されちゃってましたが、CSSの指定をしちゃうとそれが解決されるということのようです。 具体的には以下のCSS指定によってそれが可能みたいです。 img { -ms-interpolation-mode: bicubic; } デモページ う〜ん、縮小してもとっても綺麗です。 FirefoxやChromeの場合は何も指定しなくても綺麗に縮小される、っていうのも知りませんでした。 これは、サーバサイドでサムネイルを生成しなくて良くなる場面が出てきて開発者としては手間の削減になりますね。 転送量を考えれば、サムネイルが完全に不要に

[infohide]

IE7 -

[mirinon]

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

[yukee]

これいい

[dtsuka_hb]

画像のスムージング設定

[chi-bit]

スムージング (*｀ω´*)=3

[bassman1989]

今更気がついたけど、IEの画像縮小による画質劣化についてとか、もっと早く調べておけばよかった。

[hanabi_hibana]

サムネール画像を作らずに、CSSだけできれいに縮小。

[ria_ringo]

IE 画像ジャギーをなくす

[tom_a_z]

いい感じ。だけどサンプル動かない

[sgni]

確かにIEだけ異様に汚いので気になってはいた…

[tsuki-rs]

　またIEか。

[gera_com]

ie6はどうやって対策しようかな・・・

[ub-pnr]

サムネイル画像を更に小さく表示するときとかに使えるかも。

[dyamashiro]

ううむ

[mattarin]

IE7以降っぽい

[aki77]

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

[akiyan]

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

[secondlife]

-ms-interpolation-mode: bicubic;

[nano_001]

ちなみにIE8はデフォルトできれいに縮小されるっぽい。 / 記事とは関係ないけど、逆にIE8で補間を切りたい場合（ドット絵を拡大表示するとき）にはbicubicの代わりにnearest-neighborを指定。

[sw_lucchini]

IE6では幅が変化してる。あまり意味ないかも。

[hysteric_cat]

img { -ms-interpolation-mode: bicubic; }を指定することによって画像をブラウザで縮小しても綺麗に表示できるとの事、バイキュービックとか使えたんだねぇ……

[Ashizawa]

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

[paranod]

画像をCSSだけでハイクオリティに縮小サムネイル化する方法

[chaws2004]

まじでえええええええええ

[nitoyon]

きれいに画像リサイズするCSS。「-ms-interpolation-mode: bicubic;」。nearest-neighbor もしくは bicubic を指定。IE7 以降で有効。http://msdn.microsoft.com/en-us/library/ms530822(VS.85).aspx

[solidstatesociety]

IEのシェアはもりもり縮小

[boyasan]

IEの悪いところはデカい声で広めてあとほっとくのがいいんだよ

[blanc2005]

ie6は効かない＆ie8は指定が無くてもキレイ=IE7限定か〜

[tsutomura]

IE6は…？

[jdash]

IE限定だが。『img { -ms-interpolation-mode: bicubic; }』