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

Mar*_*ool 39 css firefox scaling webkit image

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

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

Mozilla允许指定算法:图像渲染:-moz-crisp-edges; IE也是如此:-ms-interpolation-mode:nearest-neighbor;

任何已知的webkit替代方案?

Phr*_*ogz 87

WebKit现在支持CSS指令:

image-rendering:-webkit-optimize-contrast;
Run Code Online (Sandbox Code Playgroud)

您可以使用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+           */
}
Run Code Online (Sandbox Code Playgroud)

  • 这里的Chrome/Safari没有任何区别 (12认同)
  • 实际上这很好地显示了这个问题http://phrogz.net/tmp/canvas_image_zoom.html (3认同)
  • 请注意,在撰写本文时,这适用于OS X上的Chrome和Safari,但不适用于Windows. (2认同)
  • 好极了!`image-rendering:pixelated` [存在于Chrome v38中](http://blog.chromium.org/2014/08/chrome-38-beta-new-primitives-for-next.html).另见:https://www.chromestatus.com/feature/5118058116939776 (2认同)

Vot*_*ple 15

不幸的是,看起来WebKit中没有此功能.查看最近的错误报告:

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