代码之家 › 专栏 › 技术社区 › Martin Kool

CSS的图像缩放:是否有webkit替代-moz crisp edges?

scaling webkit firefox image css

39

Martin Kool · 技术社区 · 15 年前

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

Mozilla允许指定算法:图像渲染:-moz清晰边缘; IE也一样:-ms插值模式:最近邻;

有已知的webkit替代品吗?

3 回复 | 直到 15 年前

1

15

VoteyDisciple 15 年前

不幸的是,WebKit中似乎没有这个特性。查看此最近的错误报告:

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

2

87

Phrogz 12 年前

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

3

2

nanobar 13 年前

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