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 属性指定用于图像缩放的算法类型。
注意： 此属性对未缩放的图像无效。
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| image-rendering | 41.0 | 79.0 | 65.0 | 10.0 | 28.0 |
Chrome、Edge 和 Opera 使用 crisp-edges 值的替代名称：-webkit-optimize-contrast。
CSS 语法
image-rendering: auto|smooth|high-quality|crisp-edges|pixelated|initial|inherit;
属性值
| 值 | 描述 | 演示 |
|---|---|---|
| auto | 让浏览器选择缩放算法。这是默认设置 | 演示 ❯ |
| smooth | 使用平滑图像颜色的算法 | 演示 ❯ |
| high-quality | 与 smooth 相同，但更倾向于高质量缩放 | 演示 ❯ |
| crisp-edges | 使用能够保留图像对比度和边缘的算法 | 演示 ❯ |
| pixelated | 如果图像放大，则使用最近邻算法，因此图像将显示为由大像素组成。如果图像缩小，则与 auto 相同 | 演示 ❯ |
| initial | 将此属性设置为其默认值。阅读关于initial | |
| inherit | 从其父元素继承此属性。阅读关于inherit |
