![](http://codehtml.cn/images/css/3.png)
image-rendering
提供一个提示,关于算法应使用缩放图像浏览器。该属性适用于元素本身,以及元素的其他属性中提供的任何图像。它对未缩放的图像没有影响。例如,如果图像的自然尺寸是
100×100
像素,但页面作者将其尺寸指定为200×200px
(或50×50px
),则图像将使用指定算法放大(或缩小)到新尺寸。由于用户交互(缩放),缩放也可能适用。
语法
auto | crisp-edges | pixelated
/* Keyword values */
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
/* Global values */
image-rendering: inherit;
image-rendering: initial;
image-rendering: unset;
auto
默认值,应使用最大化图像外观的算法来缩放图像。特别地,“平滑”颜色的缩放算法是可接受的,例如双线性插值。这适用于照片等图像。从版本1.9(Firefox 3.0)开始,Gecko使用双线性重采样(高质量)。
crisp-edges
必须使用保留图像中的对比度和边缘的算法来缩放图像,并且不会在处理中使图像变得光滑或模糊。这是用于图像,如像素艺术。
pixelated
当向上缩放图像时,必须使用“最近邻居”或类似的算法,以便图像看起来由大像素组成。缩小时,这与“自动”相同。
optimizeQuality
和optimizeSpeed
存在于早期草案(并从其SVG对应未来)定义为同义词的auto值。
实例DEMO-1
.image-cons-1 img:nth-child(3){
width: 350px;
}
.image-cons-1 ul{
maging: 0;padding: 0;
overflow: hidden;
}
.image-cons-1 ul li{
float: lef