CSS image-rendering 属性

定义和用法

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;
}

亲自试一试

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。

技术细节

默认值： auto
继承性： yes
动画制作： 不支持。请参阅：动画相关属性。
版本： CSS3
JavaScript 语法： object.style.imageRendering="pixelated"

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
41.0 79.0 65.0 10.0 28.0

Chrome、Edge 和 Opera 使用 -webkit-optimize-contrast 作为 crisp-edges 值的别名。