CSS解決方案圖像渲染

Question

我在網站中有一個可縮放的圖像。當圖像縮小到很大程度時，它會顯得非常銳利且很難看。

我試過使用圖像渲染：opimizequality，優化了CSS，但沒有奏效。

有沒有其他的出路。

謝謝

Answer 1

根據image-rendering on MDC,image-rendering目前僅在Firefox 3.6中支持。類似的屬性，-ms-interpolation-mode，可用於IE7和IE8。其他瀏覽器似乎還沒有此功能（還）。

由於latze mentioned，你最好的選擇是編輯圖像本身，縮放到你需要的水平。我不確定，但你可以嘗試使用<canvas>來執行你想要的插值。

Answer 2

我只是編輯圖片，而不是CSS。

嘗試使圖片稍微大一步，而你確保圖片不（如我們在丹麥稱之爲，不知道它是否正確英文）「像素化」。

這可以在從GIMP商店到Photoshop的各種圖像編輯程序中完成。

Answer 3

圖像並不意味着調整大小。將圖像想象成一個圖形，其中每個像素是圖中的一個正方形。如果您將圖像拉伸出來，則基本上可以使像素伸出。一些程序嘗試用它們認爲適合的像素來填充這些像素，其他程序只是使像素變大，而另一些程序只是用相同的像素填充周圍區域，以給它帶來一種發光效果。縮小圖像的大小雖然趨於更好，但也會產生相同的效果，因爲您只是截斷像素而不是添加像素。我見過的大多數程序都會將像素擠在一起，並將這些像素中的顏色組合在一起。如果你有很高的細節圖像，那麼去掉像素會讓它看起來很糟糕。沒有真正安全的方法來確定需要保留哪些像素以保持整體圖像的完整性。大多數具有縮放功能的網站都有更大的圖像，並且可以縮放以縮放查看較大圖像的細節。有些甚至可以獲得大量詳細的圖像和較小的預覽圖像。