Question

我有一个100x100像素的图像。我想显示它的两倍大小，所以200x200，我想通过CSS和（显式）不是由服务器来做。

几年以来，所有浏览器都会对图像进行反锯齿处理，而不是按比例缩放。

Mozilla允许指定算法：image-rendering：-moz-crisp-edges; IE也是如此：-ms-interpolation-mode：nearest-neighbor;

任何已知的webkit替代方案？

Answer 1

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 2

不幸的是，WebKit中似乎没有此功能。请参阅最近的错误报告：

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

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+                           */

通过CSS进行图像缩放：是否有针对-moz-crisp-edges的webkit替代方案？

3 个答案: