image-rendering

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

试一试

当页面作者指定与自然大小不同的尺寸时，用户代理将缩放图像。由于用户交互（缩放），也可能会发生缩放。例如，如果图像的自然大小为 100×100px, 但其实际尺寸为 200×200px（或 50×50px），那么图像将使用 image-rendering 指定的算法进行上采样（或下采样）。此属性对未缩放的图像没有影响。

语法

css

/* Keyword values */
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

/* Global values */
image-rendering: inherit;
image-rendering: initial;
image-rendering: revert;
image-rendering: revert-layer;
image-rendering: unset;

Values

auto: 缩放算法取决于 UA。从 1.9 版（Firefox 3.0）开始，Gecko 使用双线性重采样（高质量）。
smooth: 图像应使用最大限度地提高图像外观的算法进行缩放。特别是，允许使用“平滑”颜色的缩放算法，例如双线性插值。这适用于照片等图像。
high-quality: 与 smooth 相同，但优先考虑更高质量的缩放。如果系统资源有限，在考虑降低哪些图像的质量以及降低到什么程度时，应优先考虑具有 high-quality 的图像而不是具有任何其他值的图像。
crisp-edges: 图像使用诸如“最近邻”之类的算法进行缩放，该算法保留图像中的对比度和边缘。通常用于像素艺术或线条图等图像，不会发生模糊或颜色平滑。
pixelated: 图像使用“最近邻”或类似算法缩放至原始图像大小的最近整数倍，然后使用平滑插值将图像调整为最终所需的尺寸。这旨在保留“像素化”外观，并在上采样分辨率不是原始分辨率的整数倍时不引入缩放伪像。

注意： 早期草案中存在的 optimizeQuality 和 optimizeSpeed 值（来自其 SVG 对应物 image-rendering）分别定义为 smooth 和 pixelated 值的同义词。

正式定义

Initial value	`auto`
Applies to	all elements
Inherited	yes
Computed value	as specified
Animation type	discrete

正式语法

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

示例

Setting image scaling algorithms

在本示例中，图像重复了三次，每次都应用了不同的 image-rendering 值。

<div>
  <img
    class="auto"
    alt="A small photo of some white and yellow flower against a leafy green background. The image is about 33% smaller than the size it is being displayed at. This upscaling causes the image to appear blurry, with notable soft edges between objects."
    src="blumen.jpg" />
  <img
    class="pixelated"
    alt="The same photo as the previous image, which is also being upscaled the same amount. Browsers that support the pixelated value for the image-rendering property display the image as very pixelated. Individual pixels are clearly visible and edges appear much sharper."
    src="blumen.jpg" />
  <img
    class="crisp-edges"
    alt="The same photo as the previous images, which is also being upscaled the same amount. Browsers that support the crisp-edges value for the image-rendering property display the image as very pixelated. In these examples, there is virtually no perceivable difference between the pixelated and crisp-edges versions."
    src="blumen.jpg" />
</div>

img {
  height: 200px;
}

CSS

css

.auto {
  image-rendering: auto;
}

.pixelated {
  image-rendering: pixelated;
}

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

Result

规范

Specification
CSS Images Module Level 3 # the-image-rendering

浏览器兼容性

BCD 表格仅在浏览器中加载