通过 CSS 缩放图像：-moz-crisp-edges 是否有 webkit 替代方案？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3900436/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?
提问by Martin Kool
I have an image that is 100x100 in pixels. I want to show it twice the size, so 200x200 and I want to do it by CSS and (explicitly) not by the server.
我有一个像素为 100x100 的图像。我想显示两倍的大小，所以 200x200 并且我想通过 CSS 并且（明确地）而不是通过服务器来完成。
Since a few years, images get anti-aliased by all browsers instead of doing a by-pixel scale.
几年以来，所有浏览器都对图像进行了抗锯齿处理，而不是按像素缩放。
Mozilla allows to specify the algorithm: image-rendering: -moz-crisp-edges; So does IE: -ms-interpolation-mode: nearest-neighbor;
Mozilla 允许指定算法： image-rendering: -moz-crisp-edges; IE 也是如此：-ms-interpolation-mode:nearest-neighbor;
Any known webkit alternative?
任何已知的 webkit 替代品？
采纳答案by VoteyDisciple
Unfortunately, it looks like this feature is absent in WebKit. See this recent bug report:
不幸的是，WebKit 中似乎没有此功能。请参阅此最近的错误报告：
回答by Phrogz
WebKit now supports the CSS directive:
WebKit 现在支持 CSS 指令：
image-rendering:-webkit-optimize-contrast;
You can see it working in action using Chrome and the last image on this page:
http://phrogz.net/tmp/canvas_image_zoom.html
您可以使用 Chrome 和此页面上的最后一张图片看到它的运行情况：http:
//phrogz.net/tmp/canvas_image_zoom.html
The rules used on that page are:
该页面上使用的规则是：
.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+ */
}
回答by Dominic
In addition to @Phrogz very useful answer and after reading this: https://developer.mozilla.org/en-US/docs/CSS/image-rendering
除了@Phrogz 非常有用的答案，阅读本文后：https: //developer.mozilla.org/en-US/docs/CSS/image-rendering
It seems like the best CSS would be this:
看起来最好的 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+ */
