如何使縮放圖像在CSS中的瀏覽器上平滑？

記得Joel曾經對要在IE中平滑地顯示調整後的圖像的特技：如何使縮放圖像在CSS中的瀏覽器上平滑？

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

這使得小型化的圖像（具有比由CSS或HTML width屬性的實際圖像的更小的尺寸）光滑無看起來崎嶇。

是否有任何類似的CSS規則適用於所有主流的現代瀏覽器，例如Firefox和Chrome？

來源

2012-11-06 datasn.io

您是否在尋找類似['image-rendering：auto']（https://developer.mozilla.org/en-US/docs/CSS/image-rendering）？（doc鏈接）請注意底部的瀏覽器兼容性表，瀏覽器支持不同的屬性。 – jedwards

我不知道CSS的等價物，但有重新縮放圖像的服務器端選項：http://www.gasi.ch/blog/inline-multiscale-image-replacement/ – coopersita

添加它[這裏]（ http://www.avivaly.com/product/silk-wedding-dress-the-princess-bride/），但它似乎並不奏效。嘗試單擊其中一個圖像打開燈箱，當光標位於圖像上方時，小型縮略圖圖像的對齊會出現在模式窗口的底部，並且所有這些圖像在Firefox中仍然堅固。但在Chrome中，它似乎正在工作。 –

-3

zoom：0-1;幾乎可以擴展任何東西。

來源

2012-11-06 03:29:42 user1757120

這並沒有回答這個問題... –

是否有任何類似的CSS規則適用於所有主要的現代瀏覽器，如Firefox和Chrome？

號

-ms-interpolation-mode是過時作爲IE9的。 CSS屬性有image-rendering，但它是實驗性的，支持的值在所有瀏覽器中都有所不同。 This SO question解決了圖像渲染屬性的最佳實踐，它將覆蓋大多數瀏覽器，甚至可以拋出IE7和IE8的特定於IE的標籤，但IE瀏覽器版本以及某些瀏覽器組合和高檔/下檔不支持。

很明顯，你可以在服務器端動態調整圖像大小，如果你真的需要高質量的圖像，那將是你的最佳選擇。

來源

2014-05-13 23:26:05 AndrewS

如何使縮放圖像在CSS中的瀏覽器上平滑？

回答

相關問題