通過CSS縮放圖像：是否有-moz-crisp-edges的webkit替代方案？

Question

我有一個100x100像素的圖像。我想顯示它的兩倍大小，所以200x200，我想通過CSS和（明確）不是由服務器來完成。

由於幾年以後，圖像會被所有瀏覽器消除鋸齒，而不是逐像素地縮放。

Mozilla允許指定算法：圖像渲染：-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+       */