files/zh-cn/web/css/image-rendering/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

---
title: image-rendering
slug: Web/CSS/image-rendering
tags:
  - CSS
  - CSS图像
  - CSS属性
  - 图像
translation_of: Web/CSS/image-rendering
---
<div>{{CSSRef}}</div>

<p><a href="/zh-CN/docs/CSS">CSS</a> 属性 <strong><code>image-rendering</code></strong> 用于设置图像缩放算法。它适用于元素本身，适用于元素其他属性中的图像，也应用于子元素。</p>

<p>The {{Glossary("user agent")}} will scale an image when the page author specifies dimensions other than its natural size. Scaling may also occur due to user interaction (zooming). 举个例子，如果有一张尺寸为 <code>100×100px</code> 的图片，但作者有意将尺寸设置为 <code>200×200px</code>（或<code>50×50px</code>），然后，图片便会根据 <code>image-rendering</code> 指定的算法，缩小或放大到新尺寸。此属性对于未缩放的图像没有影响。</p>

<div class="blockIndicator note">
<p><strong>Note:</strong> The <a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a> can provide a <a href="http://phrogz.net/tmp/canvas_image_zoom.html">fallback solution for <code>crisp-edges</code></a> through manual image data manipulation.</p>
</div>

<h2 id="语法">语法</h2>

<pre class="brush:css">/* 专有属性值 */
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

/* 全局属性值 */
image-rendering: inherit;
image-rendering: initial;
image-rendering: unset;</pre>

<h3 id="属性值">属性值</h3>

<dl>
 <dt><code>auto</code></dt>
 <dd class="syntaxbox">自 Gecko 1.9 （Firefox 3.0）起，Gecko 使用<em>双线性</em>（<em>bilinear</em>）算法进行重新采样（高质量）。</dd>
 <dt><code>smooth</code> {{Experimental_Inline}}</dt>
 <dd>应使用能最大化图像客观观感的算法来缩放图像。特别地，会“平滑”颜色的缩放算法是可以接受的，例如双线性插值。这适用于照片等类型的图像。</dd>
 <dt><code style="white-space: nowrap;">high-quality</code> {{Experimental_Inline}}</dt>
 <dd>Identical to <code>smooth</code>, but with a preference for higher-quality scaling. If system resources are constrained, images with <code style="white-space: nowrap;">high-quality</code> should be prioritized over those with any other value, when considering which images to degrade the quality of and to what degree.</dd>
 <dt><code style="white-space: nowrap;">crisp-edges</code></dt>
 <dd>必须使用可有效保留对比度和图像中的边缘的算法来对图像进行缩放，并且，该算法既不会平滑颜色，又不会在处理过程中为图像引入模糊。合适的算法包括<em>最近邻居</em>（<em>nearest-neighbor</em>）算法和其他非平滑缩放算法，比如 <em>2×SaI</em> 和 <em>hqx-*</em> 系列算法。此属性值适用于像素艺术作品，例如一些网页游戏中的图像。</dd>
 <dt><code>pixelated</code></dt>
 <dd>放大图像时, 使用最近邻居算法，因此，图像看着像是由大块像素组成的。缩小图像时，算法与 <code>auto</code> 相同。</dd>
</dl>

<div class="blockIndicator note">
<p><strong>注意：</strong>The values <code>optimizeQuality</code> and <code>optimizeSpeed</code> present in an early draft (and coming from its SVG counterpart) are defined as synonyms for the <code>smooth</code> and <code>pixelated</code> values respectively.</p>
</div>

<h3 id="形式化语法">形式化语法</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="例子">例子</h2>

<div class="hidden">
<pre class="brush: html">&lt;div&gt;
  &lt;img class="auto" alt="auto" src="https://mdn.mozillademos.org/files/2765/blumen.jpg" /&gt;
  &lt;img class="pixelated" alt="pixelated" src="https://mdn.mozillademos.org/files/2765/blumen.jpg" /&gt;
  &lt;img class="crisp-edges" alt="crisp-edges" src="https://mdn.mozillademos.org/files/2765/blumen.jpg" /&gt;
&lt;/div&gt;
</pre>
</div>

<div class="hidden">
<pre class="brush: css">img {
  height: 200px;
}
</pre>
</div>

<pre class="brush: 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;
}
</pre>

<p>{{EmbedLiveSample('Examples')}}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS3 Images", "#the-image-rendering", "image-rendering")}}</td>
   <td>{{Spec2("CSS3 Images")}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<div class="blockIndicator note">
<p><strong>注意：</strong>虽然在最初此属性与 SVG 的 <code>image-rendering</code> 属性定义相近, 但到现在，它们之间已有相当的差别。</p>
</div>

<h2 id="浏览器兼容性">浏览器兼容性</h2>


<p>{{Compat("css.properties.image-rendering")}}</p>

<h3 id="备注">备注</h3>

<div class="blockIndicator note">
<p><strong>译者注：</strong>这是来自旧版浏览器兼容性表格的备注，保留以便查阅。可另行参阅 <a href="https://caniuse.com/#search=image-rendering">Can I use</a>。</p>
</div>

<p>Internet Explorer 7 和 8 支持非标准的 <a class="external" href="http://msdn.microsoft.com/en-us/library/ie/ms530822(v=vs.85).aspx"><code>-ms-interpolation-mode</code> 属性</a>，有两个属性值：<code>bicubic</code> 和 <code>nearest-neighbor</code>，和大量差距：</p>

<ul>
 <li>只应用于 <code>&lt;img&gt;</code> 等元素带的图片</li>
 <li>IE 7 上此属性只支持无透明度的图片</li>
 <li>不能继承</li>
 <li>IE 7 默认值：<code> nearest-neighbor</code> (低质量)</li>
 <li>IE 8 默认值：<code> bicubic</code> (高质量)</li>
 <li>IE 9 不支持此非标准属性</li>
</ul>

<p>WebKit 支持一个非标准属性: <code>-webkit-optimize-contrast</code>.</p>

<p>WebKit Nightly 支持，见 <a href="https://bugs.webkit.org/show_bug.cgi?id=146771">bug</a></p>

<p>Canvas 可以通过人工方式支持 <a class="external" href="http://phrogz.net/tmp/canvas_image_zoom.html">crisp-edge/optimize-contrast</a> 属性.</p>