We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

概述

image-rendering CSS 属性决定浏览器对缩放图像采取的缩放算法.它适用于元素本身和有其他属性的图像.它对非缩放图像没有影响。

举个例子,如果一个尺寸为100×100px的图片,但作者有意把尺寸设置为200×200px (或50×50px), 然后图片会根据指定的算法缩小或放大到新尺寸.

初始值auto
适用元素all elements
是否是继承属性yes
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序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% squares.gif 100% squares.gif 138% squares.gif缩小后 hut.jpg 放大后 blumen.jpg

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

78% squares.gif 100% squares.gif 138% squares.gif缩小后 hut.jpg 放大后 blumen.jpg

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

78% squares.gif 100% squares.gif 138% squares.gif 缩小后 hut.jpg 放大后 blumen.jpg

规范

Specification Status Comment
CSS Images Module Level 3
image-rendering
Candidate Recommendation Initial definition

虽然最初与 SVG image-rendering 属性定义相近, 但现在有相当的差别.

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

特性 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属性.

文档标签和贡献者

此页面的贡献者: Go7hic, L9m
最后编辑者: Go7hic,