CSS中的图像缩放：是否有一个-webkit替代-moz-crisp-edges？

Question

CSS中的图像缩放：是否有一个-webkit替代-moz-crisp-edges？

cssimagefirefoxwebkitscaling

43

我有一张100x100像素的图片，我想通过CSS将其显示成两倍大小，即200x200，并且（明确地）不通过服务器来实现。

自几年前开始，所有浏览器都使用抗锯齿技术代替像素缩放。

Mozilla允许指定算法：image-rendering: -moz-crisp-edges; IE也可以使用：-ms-interpolation-mode: nearest-neighbor;

是否有任何已知的WebKit替代方案？

- Martin Kool

3个回答

15

很遗憾，看起来这个功能在WebKit中不存在。请查看最近的Bug报告：

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

- VoteyDisciple

很遗憾 :-( 谢谢你的回答。 - Martin Kool

2

除了 @Phrogz 的非常有用的回答之外，阅读了这篇文章后：https://developer.mozilla.org/zh-CN/docs/Web/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+                           */

- Dominic

3

“bicubic”是一种图像缩放算法。OP称在IE中使用“nearest-neighbor”也可以。 - lapo

@lapo 我个人在不同的浏览器上测试了各种值，发现这种方法在放大时效果最佳。我还在IE上进行了测试，因为这是一个关键的浏览器，在我回忆中是这样的。 - Dominic

2

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

双三次插值将平滑放大的图像；对于像素化缩放，请使用“-ms-interpolation-mode: nearest-neighbor;”。请参见https://learn.microsoft.com/en-us/openspecs/ie_standards/ms-css21e/baca27b8-6192-4c3e-af0b-9c0875ad7030。 - augurar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Phrogz · Accepted Answer

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