image-rendering属性基本效果实例页面

展示

小图变大（auto / pixelated + crisp-edges）

大图变小（auto / pixelated + crisp-edges）

代码

HTML：

<h4>小图变大（auto / pixelated + crisp-edges）</h4>
<p>
    <img class="auto" src="/s/1.jpg">
    <img class="pixelated-crisp-edges" src="/s/1.jpg">
</p>
<h4>大图变小（auto / pixelated + crisp-edges）</h4>
<p>
    <img class="auto" src="/l/1.jpg">
    <img class="pixelated-crisp-edges" src="/l/1.jpg">
</p>

CSS：

img {
    width: 300px; 
}
.auto {
    image-rendering: auto;
}
.pixelated-crisp-edges {
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}