CSS图像渲染解决方案

Question

我在网站上有一个可缩放的图像。当图像缩小到很大的范围时，它看起来非常锐利且难看。

我尝试使用图像渲染：opimizequality，优化了CSS但不起作用。

还有其他出路。

由于

Answer 1

根据image-rendering on MDC，image-rendering目前仅在Firefox 3.6中受支持。 IE7和IE8也有类似的属性-ms-interpolation-mode。其他浏览器似乎还没有这个功能。

作为latze mentioned，您最好的选择是编辑图像本身，将其缩放到您需要的级别。我不确定，但你可以尝试使用<canvas>来执行你想要的插值。

Answer 2

我只想编辑图片而不是CSS。

尝试将图片逐步放大，同时确保图片没有（我们称之为丹麦语，不确定它是否正确英文）“pixelate”。

这可以在从Gimp-shop到Photoshop的各种图像编辑程序中完成。

Answer 3

图像并不意味着重新调整大小。将图像看作图形，其中每个像素是图形中的单个正方形。如果将图像拉出，则基本上可以使像素伸展开来。一些程序尝试用他们认为适合的那些像素填充这些像素，其他程序只是使像素更大，而其他程序只是用相同的像素填充周围区域以赋予它一种发光效果。调整图像大小，虽然它往往更好地工作，也会产生相同的效果，因为你只是砍掉像素而不是添加它们。我见过的大多数程序会将像素压缩在一起，组合这些像素中的颜色。如果你有一个高细节的图像，那么切掉像素将使它看起来很糟糕。没有真正安全的方法来确定需要保留哪些像素以保持整体图像。大多数具有缩放功能的网站都有一个更大的图像，该图像已经调整大小，它们可以让您缩放以查看较大图像的细节。有些甚至会获得大量详细的预览和较小预览的单独图像。