image-rendering

在此页

句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

image-rendering CSS property sets an image scaling algorithm. The property applies to an element itself, to any images set in its other properties, and to its descendants.

用户代理 will scale an image when the page author specifies dimensions other than its natural size. Scaling may also occur due to user interaction (zooming). For example, if the natural size of an image is 100×100px , but its actual dimensions are 200×200px (或 50×50px ), then the image will be upscaled (or downscaled) using the algorithm specified by image-rendering . This property has no effect on non-scaled images.

句法

/* Keyword values */
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
/* Global values */
image-rendering: inherit;
image-rendering: initial;
image-rendering: unset;

值

auto: The scaling algorithm is UA dependent. Since version 1.9 (Firefox 3.0), Gecko uses bilinear resampling (high quality).
smooth
high-quality: Identical to smooth , but with a preference for higher-quality scaling. If system resources are constrained, images with high-quality should be prioritized over those with any other value, when considering which images to degrade the quality of and to what degree.
crisp-edges: The image must be scaled with an algorithm that preserves contrast and edges in the image, and which does not smooth colors or introduce blur to the image in the process. Suitable algorithms include nearest-neighbor and other non-smoothing scaling algorithms such as 2×SaI and hqx-family algorithms. This value is intended for pixel-art images, such as in browser games.
pixelated: When scaling the image up, the nearest-neighbor algorithm must be used, so that the image appears to be composed of large pixels. When scaling down, this is the same as auto .

注意： The values optimizeQuality and optimizeSpeed present in an early draft (and coming from its SVG counterpart image-rendering ) are defined as synonyms for the smooth and pixelated values respectively.

形式定义

初始值	`auto`
适用于	所有元素
继承	yes
计算值	如指定
动画类型	discrete

形式句法

auto | crisp-edges | pixelated

范例

Setting image scaling algorithms

In practical use, the pixelated and crisp-edges rules can be combined to provide some fallback for each other. (Just prepend the actual rules with the fallback.) The 画布 API can provide a fallback solution for pixelated through manual image data manipulation or with imageSmoothingEnabled .

<div>
  <img class="auto" alt="auto" src="https://yari-demos.prod.mdn.mozit.cloud/files/2765/blumen.jpg" />
  <img class="pixelated" alt="pixelated" src="https://yari-demos.prod.mdn.mozit.cloud/files/2765/blumen.jpg" />
  <img class="crisp-edges" alt="crisp-edges" src="https://yari-demos.prod.mdn.mozit.cloud/files/2765/blumen.jpg" />
</div>

img {
  height: 200px;
}

CSS

.auto {
  image-rendering: auto;
}
.pixelated {
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: pixelated;
}
.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

结果

规范

规范	状态	注释
CSS Images Module Level 3 The definition of 'image-rendering' in that specification.	候选推荐	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`image-rendering`	Chrome 完整支持 13	Edge 完整支持 79	Firefox 完整支持 3.6	IE 不支持 No	Opera 完整支持 15	Safari 完整支持 6	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 14	Safari iOS 完整支持 6	Samsung Internet Android 完整支持 1.0
`crisp-edges`	Chrome 完整支持 13 Alternate Name 完整支持 13 Alternate Name Alternate Name Uses the non-standard name: `-webkit-optimize-contrast`	Edge 完整支持 79 Alternate Name 完整支持 79 Alternate Name Alternate Name Uses the non-standard name: `-webkit-optimize-contrast`	Firefox 完整支持 65 完整支持 65 完整支持 3.6 Prefixed Prefixed Implemented with the vendor prefix: -moz-	IE 不支持 No	Opera 完整支持 15 Alternate Name 完整支持 15 Alternate Name Alternate Name Uses the non-standard name: `-webkit-optimize-contrast`	Safari 完整支持 6 Alternate Name 完整支持 6 Alternate Name Alternate Name Uses the non-standard name: `-webkit-optimize-contrast`	WebView Android 完整支持 ≤37 Alternate Name 完整支持 ≤37 Alternate Name Alternate Name Uses the non-standard name: `-webkit-optimize-contrast`	Chrome Android 完整支持 18 Alternate Name 完整支持 18 Alternate Name Alternate Name Uses the non-standard name: `-webkit-optimize-contrast`	Firefox Android 完整支持 65 完整支持 65 完整支持 4 Prefixed Prefixed Implemented with the vendor prefix: -moz-	Opera Android 完整支持 14 Alternate Name 完整支持 14 Alternate Name Alternate Name Uses the non-standard name: `-webkit-optimize-contrast`	Safari iOS 完整支持 6 Alternate Name 完整支持 6 Alternate Name Alternate Name Uses the non-standard name: `-webkit-optimize-contrast`	Samsung Internet Android 完整支持 1.0 Alternate Name 完整支持 1.0 Alternate Name Alternate Name Uses the non-standard name: `-webkit-optimize-contrast`
`optimizeQuality` 弃用非标	Chrome 完整支持 28	Edge 完整支持 79	Firefox 完整支持 3.6	IE 不支持 No	Opera 完整支持 15	Safari 完整支持 6.1	WebView Android 完整支持 ≤37	Chrome Android 完整支持 28	Firefox Android 完整支持 4	Opera Android 完整支持 14	Safari iOS 完整支持 7	Samsung Internet Android 完整支持 1.5
`optimizeSpeed` 弃用非标	Chrome 完整支持 28	Edge 完整支持 79	Firefox 完整支持 3.6	IE 不支持 No	Opera 完整支持 15	Safari 完整支持 6.1	WebView Android 完整支持 ≤37	Chrome Android 完整支持 28	Firefox Android 完整支持 4	Opera Android 完整支持 14	Safari iOS 完整支持 7	Samsung Internet Android 完整支持 1.5
`pixelated`	Chrome 完整支持 41	Edge 完整支持 79	Firefox 不支持 No	IE 不支持 No	Opera 完整支持 26	Safari 完整支持 10	WebView Android 完整支持 41	Chrome Android 完整支持 41	Firefox Android 不支持 No	Opera Android 完整支持 26	Safari iOS 完整支持 10	Samsung Internet Android 完整支持 4.0

图例

完整支持
不支持
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
使用非标名称。
要求使用供应商前缀或不同名称。

注意： Although crisp-edges is supposed to use a pixel-art scaler like in the specification example, in practice no browsers (as of January 2020) does so. In Firefox , crisp-edges is interpreted as nearest-neighbor, pixelated is not supported, and auto is interpolated as trilinear or linear.

For behavior on Chromium and Safari (WebKit), see the GetInterpolationQuality function and CSSPrimitiveValue::operator ImageRendering() 分别。

另请参阅

Other image-related CSS properties: object-fit , object-position , image-orientation , image-rendering , image-resolution .

元数据

最后修改： Oct 3, 2020

CSS
CSS 参考
CSS Images
指南
1. Implementing image sprites in CSS
2. Using CSS gradients
特性
1. <gradient>
2. <image>
3. ~~image-orientation~~
4. image-rendering
5. object-fit
6. object-position

在此页

句法

值

形式定义

形式句法

范例

Setting image scaling algorithms

CSS

结果

规范

浏览器兼容性

图例

另请参阅

相关话题