这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
概述
image-rendering CSS 属性决定浏览器对缩放图像采取的缩放算法.它适用于元素本身和有其他属性的图像.它对非缩放图像没有影响。
举个例子，如果一个尺寸为100×100px的图片，但作者有意把尺寸设置为200×200px (或50×50px), 然后图片会根据指定的算法缩小或放大到新尺寸.
| 初始值 | auto |
|---|---|
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| 适用媒体 | visual |
| 计算值 | as specified |
| 是否适用于 CSS 动画 | 否 |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; /* 全局属性 */ image-rendering: inherit; image-rendering: initial; image-rendering: unset;
属性
auto- 默认值， 图像缩放时以外观优先。颜色过渡"平滑"算法是很合适的,比如双线性插值算法. 这种适合于照片. 从 1.9版本起 (Firefox 3.0), Gecko 使用双线性插值算法(高质量).
crisp-edges- 图像缩放时,该算法保留图像的对比度和边缘.在不平滑过渡的颜色中引入模糊图像. 这常用于像素级作品.
pixelated- 当缩放图像时, 使用"nearest neighbor"或类似算法, 所以图像将由大像素组成. 当缩小时，效果与'auto'值一样。
optimizeQuality 和 optimizeSpeed 存在于早前的草案中(来自对应的 SVG 属性) 与 auto 值是同义词.正式语法
auto | crisp-edges | pixelated
例子
/* 应用于GIF和PNG图片; 防止边缘模糊 */
img[src$=".gif"], img[src$=".png"] {
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
div {
background: url(chessboard.gif) no-repeat 50% 50%;
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
实例
image-rendering: auto;
78% 
100% 138% 缩小后 
放大后 
image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)
78% 100% 138% 缩小后 放大后
image-rendering: crisp-edges; (-webkit-optimize-contrast)
78% 100% 138% 缩小后 放大后
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Image Values and Replaced Content Module Level 3 image-rendering |
Candidate Recommendation | Initial definition |
虽然最初与 SVG image-rendering 属性定义相近, 但现在有相当的差别.
浏览器兼容性
| 特性 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
基本支持 (auto) |
(Yes) | 3.6 (1.9.2) | 未实现[1] | 11.60 | (Yes) |
crisp-edges |
未实现 | 3.6 (1.9.2)-moz | 未实现 | 11.60-o | (Yes) [2] |
pixelated |
41.0 | 未实现 (bug 856337) | 未实现 | 26.0 | (Yes) [3] |
optimizeQuality, optimizeSpeed |
未实现 | 3.6 (1.9.2) | 未实现 | 11.60 | (Yes) |
| 特性 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本支持 | 41.0 | ? | ? | ? | ? |
备注
[1] Internet Explorer 7 和 8 支持非标准的 -ms-interpolation-mode property 有两个值 (bicubic 和 nearest-neighbor):
- 只能应用于图片 (JPG, GIF, PNG, ...)
- 在 IE7 只能对无透明度的图片应用
- 不能继承
- IE7默认值:
nearest-neighbor(低质量) - IE8默认值:
bicubic(高质量) - IE9不支持这个非标准属性
[2] 支持一个非标准属性: -webkit-optimize-contrast.
[3] WebKit Nightly 支持, 见 bug
Canvas 可以通过人工方式支持 crisp-edge/optimize-contrast属性.