通过 CSS 缩放图像：-moz-crisp-edges 是不是有 webkit 替代方案？

Posted 2023-03-06

【中文标题】通过 CSS 缩放图像：-moz-crisp-edges 是不是有 webkit 替代方案？

【英文标题】：Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?通过 CSS 缩放图像：-moz-crisp-edges 是否有 webkit 替代方案？

【发布时间】：2011-04-23 11:03:51

【问题描述】：

我有一个 100x100 像素的图像。我想显示两倍的大小，所以 200x200，我想通过 CSS 而不是（明确地）通过服务器来做到这一点。

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

Mozilla 允许指定算法：图像渲染：-moz-crisp-edges； IE也是如此：-ms-interpolation-mode:最近邻；

任何已知的 webkit 替代品？

【参考方案1】：

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

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

【讨论】：

无赖:-(谢谢你的回答。

【参考方案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+           */

【讨论】：

请注意，在撰写本文时，这适用于 OS X 上的 Chrome 和 Safari，但不适用于 Windows。

在 Chrome/Safari 中没有任何区别

其实这很好地说明了这个问题phrogz.net/tmp/canvas_image_zoom.html

耶！ image-rendering:pixelatedis present in Chrome v38。另见：chromestatus.com/feature/5118058116939776

非常感谢您的回答！

【参考方案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+                           */

【讨论】：

bicubic? OP 说 nearest-neighbor 在 IE 中没问题。

@lapo 我已经在各种浏览器中亲自测试过不同的值，这在放大时给出了最好的结果，我还在 IE 上进行了测试，因为它是执行此 iirc 时的关键浏览器

截至 2015 年 5 月，此答案不会在当前版本的 IE 上给出像素化结果。

双三次插值会平滑放大后的图像；对于像素化缩放使用-ms-interpolation-mode: nearest-neighbor;。见docs.microsoft.com/en-us/openspecs/ie_standards/ms-css21e/…