CSS image-rendering 属性

示例

显示可用于图片缩放的不同算法：

.image {
height: 100px;
width: 100px;
image-rendering: auto;
}

.crisp-edges {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}

.pixelated {
image-rendering: pixelated;
}

.smooth {
image-rendering: smooth;
}

.high-quality {
image-rendering: high-quality;
}

亲自试一试 »

定义和用法

这个image-rendering属性指定用于图片缩放的算法类型。

笔记：此属性对未缩放的图片没有影响。

展示演示❯

默认值：	汽车
遗传：	是的
可动画：	不。阅读可动画的
版本：	CSS3
JavaScript 语法：	对象.style.imageRendering="pixelated"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
image-rendering	41.0	79.0	65.0	10.0	28.0

Chrome、Edge、Opera 和 Safari 使用替代名称 crisp-edges值：-webkit-optimize-contrast。

CSS 语法

属性值

Value	Description	Demo
auto	Let the browser choose the scaling algorithm. This is default	Demo ❯
smooth	Use an algorithm that smooth out the colors in the image	Demo ❯
high-quality	Same as smooth, but with a preference for higher-quality scaling	Demo ❯
crisp-edges	Use an algorithm that will preserve the contrast and edges in the image	Demo ❯
pixelated	If the image is scaled up, the nearest-neighbor algorithm is used, so the image will appear as being composed of large pixels. If the image is scaled down, it will be the same as auto	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit