DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 在IE7下生成高質量CSS縮略圖
在IE7下生成高質量CSS縮略圖
編輯:CSS詳解     

在前端開發中,我們經常遇到這樣的情況:服務器傳到前端的圖片需要縮小以顯示(如下),在將其縮放之後,IE中圖片效果不容樂觀。

<img class="thumb" src="pic.jpg" alt="This image is really 500x500 big" width="50" height="50" />

IE7支持自定義雙三次“重采樣模式”。devthought為我們提供了一種在IE7中生成高質量縮略圖方法,只需要對圖片使用下面的CSS屬性,即可修復圖片質量。

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

-ms-interpolation-mode還有另外一個屬性值:nearest-neighbor。它使用的是最近鄰近插值算法,會產生比較明顯的鋸齒,圖片模糊。對於生成高質量縮略圖來說顯然不可取。

schill對比了縮略圖在各個浏覽器間的差異。與其它浏覽器比較,Opera中圖像邊緣略顯粗糙。總體來說,主流浏覽器中縮略圖片質量還不錯。

遺憾的是,IE6好像還沒有很好的方法對縮略圖片作平滑處理。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved