通过CSS缩放图像：是否有一个webkit替代-moz-crisp-edges？

我有一个像素为100×100的图像。 我想显示它的两倍大小，所以200×200，我想通过CSS和（明确）而不是由服务器。

几年以后，所有浏览器都会使用图像反锯齿，而不是按像素缩放。

Mozilla允许指定algorithm：图像渲染：-moz-crisp-edges; IE也是这样：-ms-interpolation-mode：nearest-neighbor;

任何已知的webkit替代品？

Answer 1

不幸的是，WebKit中没有这个特性。 看到这个最近的错误报告：

https://bugs.webkit.org/show_bug.cgi?id=40881

Answer 2

WebKit现在支持CSS指令：

image-rendering:-webkit-optimize-contrast; 

您可以使用Chrome浏览器和本页上的最后一张图片看到它正在运行：
http://phrogz.net/tmp/canvas_image_zoom.html

该页面使用的规则是：

 .pixelated { image-rendering:optimizeSpeed; /* Legal fallback */ image-rendering:-moz-crisp-edges; /* Firefox */ image-rendering:-o-crisp-edges; /* Opera */ image-rendering:-webkit-optimize-contrast; /* Safari */ image-rendering:optimize-contrast; /* CSS3 Proposed */ image-rendering:crisp-edges; /* CSS4 Proposed */ image-rendering:pixelated; /* CSS4 Proposed */ -ms-interpolation-mode:nearest-neighbor; /* IE8+ */ } 

Answer 3

除了@Phrogz非常有用的答案和阅读后： https ： //developer.mozilla.org/en-US/docs/CSS/image-rendering

看来最好的CSS会是这样的：

 image-rendering:optimizeSpeed; /* Legal fallback */ image-rendering:-moz-crisp-edges; /* Firefox */ image-rendering:-o-crisp-edges; /* Opera */ image-rendering:-webkit-optimize-contrast; /* Chrome (and eventually Safari) */ image-rendering:crisp-edges; /* CSS3 Proposed */ -ms-interpolation-mode:bicubic; /* IE8+ */