2008-12-23 46 views
22

當我可視化地縮放圖像時,Firefox 3會模糊它。 Firefox 2和其他瀏覽器不這樣做,這是我期望的行爲。這對使用png或gif精靈創建一個基於web的遊戲來說尤其跛腳。Firefox在通過外部CSS或內聯樣式縮放時會模糊圖像。

例如,示出在Firefox 3一100×100圖象是這樣時:

<img src="sprite.gif" width="200" /> 

<img src="sprite.gif" style="width:200px; height:200px;" /> 

它看起來模糊在FF3,不是在IE。

有關如何防止這種情況的任何想法?

回答

4

您正在將圖像從其原始大小縮放 - 期望的效果是通常有平滑縮放,並且它會出現FFX3已經開始這樣做(我假設雙線性過濾)。我想如果你看看Safari和Opera,你會發現他們也會過濾圖像。

1

我實際上更喜歡FF做它的方式,因爲它在縮放圖像時使用內插,在大多數情況下,這使得圖像看起來比它們在IE中好得多。不過,我想可能會出現這種情況,例如使用精靈時,它不好。

我不認爲有辦法解決這個問題。

0

您應該避免縮放客戶端上的圖像。向上縮放圖像就像縮放,瀏覽器沒有圖像的信息以比實際更高的分辨率顯示它,所以如果沒有使圖像變得模糊不清,也許它不會在IE瀏覽器中顯示,嘗試將200px改爲400px。

1

不幸的是我沒有一個解決方案,但是這是一個大量用戶的(例如,像素藝術家)如果受此影響,請發送反饋給http://hendrix.mozilla.org/和表決一個完整的因素在於。爲corresponding bug

Mozilla忽略這個問題令人失望。對於許多受影響的用戶來說,這意味着除了切換瀏覽器之外別無選擇。 IE有一個CSS property來選擇調整大小過濾器,所以這似乎是最好的選擇。

這是Google Chrome的bug report,它與Firefox有相同的問題。我不瞭解Opera,但是我聽說他們使用一些啓發式技術來實現更加自動的縮放。

+1

你應該畫出你想要看的大小的圖像。如果你想用大像素做像素藝術,那麼使用真正的大像素。 Firefox 3的行爲在保留實際圖像形狀方面做得更好 - 當我看到一個小的JPEG時,我看不到一堆正方形。 – Chuck 2009-03-18 16:56:44

+0

怎麼樣通過JS的圖像大小的動態變化?怎麼樣放大圖像的大小?對於JPEG雙線性過濾是有意義的,但對於PNG和GIF來說,通常不是正確的做法。這是一個主要的bug,IE顯示瞭如何做到這一點。 – nikow 2009-03-18 17:03:37

2

http://developer.mozilla.org/En/CSS/Image-rendering只適用於Firefox(Minefield/3.6a1pre/Gecko 1.9.2)的當前中繼版本。此功能不在Firefox 3.0中,並且不會在即將發佈的3.5版本中發佈。帶有該選項的第一個版本將是目前處於早期規劃階段的3.5之後的下一個主要版本,預計在2010年發佈。

1

我想知道如果您創建的預期最大尺寸的小精靈會得到更好的結果他們被查看,然後根據需要縮小它們?

2

默認情況下,Internet Explorer 8縮放它們時會「模糊」圖像。這實際上是一件好事。當使用雙三次採樣而不是最近鄰採樣進行縮放時,大多數圖像看起來更好。

如果你希望Internet Explorer 8的縮放圖像像以前的版本做,把這個在你的CSS:

-ms-interpolation-mode: nearest-neighbor; 

如果你希望Internet Explorer 7中縮放圖像像IE 8,使用此:

-ms-interpolation-mode: bicubic; 

除了圖像的外觀,你還必須考慮性能。我發現IE 7和IE 8在使用雙三次採樣時比Firefox 3.6需要更多的CPU功能來縮放圖像。