图像绘制 | image-rendering

image-rendering

这是一项实验技术

在使用此产品之前，请仔细检查浏览器兼容性表。

image-rendering 提供一个提示，关于算法应使用缩放图像浏览器。

/* Keyword values */
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

/* Global values */
image-rendering: inherit;
image-rendering: initial;
image-rendering: unset;

该属性适用于元素本身，以及元素的其他属性中提供的任何图像。它对未缩放的图像没有影响。例如，如果图像的自然尺寸是100×100像素，但页面作者将其尺寸指定为200×200px（或50×50px），则图像将使用指定算法放大（或缩小）到新尺寸。由于用户交互（缩放），缩放也可能适用。

Canvas可以通过手动图像数据操作为清晰边缘/优化对比度提供后备解决方案。

语法

取值

auto默认值，应使用最大化图像外观的算法来缩放图像。特别地，“平滑”颜色的缩放算法是可接受的，例如双线性插值。这适用于照片等图像。从版本1.9（Firefox 3.0）开始，Gecko使用双线性重采样（高质量）。

optimizeQuality和optimizeSpeed存在于早期草案（并从其SVG对应未来）定义为同义词的auto值。

规范语法

auto | crisp-edges | pixelated

例子

/* applies to GIF and PNG images; avoids blurry edges */
img[src$=".gif"], img[src$=".png"] {
  image-rendering: crisp-edges;
}

div {
  background: url(chessboard.gif) no-repeat 50% 50%;
  image-rendering: crisp-edges;
}

现场示例

image-rendering: auto;

78%

100%

138%

downsized

upsized

image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)

78%

100%

138%

downsized

upsized

image-rendering: crisp-edges; (-webkit-optimize-contrast)

78%

100%

138%

downsized

upsized

规范

Note: Though initially similar to the SVG image-rendering attribute, the values are quite different now.

浏览器兼容性