`image-rendering` CSS 属性

基线广泛可用 *

自 2020年1月起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

* 此特性的某些部分的支持程度可能有所不同。

了解更多
查看完整兼容性

image-rendering CSS 属性设置图像缩放算法。该属性作用于元素本身、其其他属性中设置的任何图像，以及其后代元素。

尝试一下

image-rendering: auto;

image-rendering: smooth;

image-rendering: crisp-edges;

image-rendering: pixelated;

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/lizard.png" />
</section>

#example-element {
  height: 480px;
  object-fit: cover;
}

当页面作者指定的尺寸与图像固有尺寸不同时，用户代理会对图像进行缩放。用户交互（例如缩放页面）也可能导致缩放。例如，若图像的固有尺寸为 100×100px，但其实际尺寸为 200×200px（或 50×50px），则图像会按 image-rendering 指定的算法放大（或缩小）。该属性对未缩放的图像没有效果。

语法

css

/* 关键字值 */
image-rendering: auto;
image-rendering: smooth;
image-rendering: crisp-edges;
image-rendering: pixelated;

/* 全局值 */
image-rendering: inherit;
image-rendering: initial;
image-rendering: revert;
image-rendering: revert-layer;
image-rendering: unset;

值

auto: 缩放算法由用户代理决定。自 1.9 版（Firefox 3.0）起，Gecko 使用双线性重采样（高质量）。
smooth: 图像应使用能最大程度优化视觉效果的算法进行缩放。特别是允许“平滑”颜色的缩放算法，例如双线性插值。该值适用于照片等图像。
crisp-edges: 图像使用诸如“最近邻”等算法进行缩放，以保留图像中的对比度和边缘。通常适用于像素画或线条图等图像，不会产生模糊或颜色平滑。
pixelated: 图像先使用“最近邻”或类似算法缩放到原始图像尺寸的最近整数倍，再使用平滑插值将图像调整到最终所需尺寸。这样可以在放大分辨率不是原始尺寸整数倍时，保留“像素化”外观，同时避免引入缩放伪影。

备注：早期草案中出现的值 optimizeQuality 和 optimizeSpeed（来自其 SVG 对应属性 image-rendering）分别被定义为 smooth 和 pixelated 的同义词。

备注：CSS 图像模块为 image-rendering 属性定义了 high-quality 值，用于表示偏好更高质量的缩放，但目前没有任何浏览器支持该值。

形式定义

初始值	`auto`
适用元素	所有元素
是否是继承属性	是
计算值	as specified
动画类型	离散值

形式语法

image-rendering = 
  auto          |
  smooth        |
  high-quality  |
  pixelated     |
  crisp-edges

示例

设置图像缩放算法

在本示例中，同一图像重复显示四次，每次应用不同的 image-rendering 值。

<div>
  <img
    class="auto"
    alt="一张白色和黄色花朵的小照片，背景是绿叶。图像比其显示尺寸大约小 33%。这种放大会使图像显得模糊，物体之间的边缘明显较软。"
    src="blumen.jpg" />
  <img
    class="smooth"
    alt="与第一张相同的照片，放大程度也相同。支持 image-rendering 属性的 smooth 值的浏览器会以尽量优化外观的方式显示该图像。"
    src="blumen.jpg" />
  <img
    class="pixelated"
    alt="与第一张相同的照片，放大程度也相同。支持 image-rendering 属性的 pixelated 值的浏览器会以非常像素化的方式显示该图像。单个像素清晰可见，边缘看起来更加锐利。"
    src="blumen.jpg" />
  <img
    class="crisp-edges"
    alt="与第一张相同的照片，放大程度也相同。支持 image-rendering 属性的 crisp-edges 值的浏览器会以非常像素化的方式显示该图像。在这些示例中，pixelated 与 crisp-edges 版本几乎看不出差别。"
    src="blumen.jpg" />
</div>

img {
  height: 200px;
}

CSS

css

.auto {
  image-rendering: auto;
}

.smooth {
  image-rendering: smooth;
}

.pixelated {
  image-rendering: pixelated;
}

.crisp-edges {
  image-rendering: crisp-edges;
}