如何使缩放图像在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中的浏览器上平滑？

回答

相关问题