图像绘制 | 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
应用于	all elements
是否继承	yes
适用媒体	visual
计算值	as specified
Animation type	discrete
规范顺序	the unique non-ambiguous order defined by the formal grammar

语法

取值

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

crisp-edges必须使用保留图像中的对比度和边缘的算法来缩放图像，并且不会在处理中使图像变得光滑或模糊。这是用于图像，如像素艺术。

pixelated当向上缩放图像时，必须使用“最近邻居”或类似的算法，以便图像看起来由大像素组成。缩小时，这与“自动”相同。

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

规范

Specification	Status	Comment
CSS Image Values and Replaced Content Module Level 3The definition of 'image-rendering' in that specification.	Candidate Recommendation	Initial definition

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

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support (auto)	(Yes)	No support	3.6 (1.9.2)	No support1	11.60	(Yes)
crisp-edges	No support	No support	3.6 (1.9.2)-moz	No support	11.60-o	(Yes)3
pixelated	41.0	No support	No support2	No support	26.0	(Yes)4
optimizeQuality, optimizeSpeed	No support	No support	3.6 (1.9.2)	No support	11.60	(Yes)

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	41.0	?	?	?	?