Paul Kinlan
作为 Web 开发者，我们一直在处理图片，在大多数情况下，浏览器非常擅长缩放图片以适应网站设计的边界，同时保持图片的美观。但是，如果您想控制浏览器如何缩放网页上的图片，该怎么办？
Chrome 41（2015 年 1 月为 Beta 版）引入了新的 CSS 属性 image-rendering: pixelated（规范），可让您更好地控制浏览器如何渲染放大的图片。
CSS 属性 image-rendering 和值 pixelated 很有趣，因为它们会在调整图片大小时关闭浏览器的标准平滑缩放（通常是双线性插值），并将其替换为另一种缩放算法（在大多数情况下为最近邻）。
假设您有一个 2×2 像素的图片，并将其放大到 100×100 像素，浏览器会以不会使其看起来像方块的方式呈现该图片。例如：
在许多情况下，您不希望出现这种平滑处理行为，而是希望使用可保留更准确图像表示的方法。
如需获得此效果，只需按如下所示将 image-rendering: pixelated; 应用于图片即可。
<img
style="image-rendering: pixelated;"
width="100" height="100"
src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">
试用演示版。如您所见，此属性的应用对图片的呈现方式有很大影响。
此属性可在许多位置应用：
<img>元素<canvas style="image-rendering: pixelated">元素- 具有
background-image属性的任何元素
我还是没听明白。我应该在哪里使用此功能？
如果您只是在网站上展示照片，则可能不需要这样做。
游戏是一个很好的应用场景，您经常需要放大画布，使其正确适应屏幕尺寸。在引入此 CSS 属性之前，浏览器会以使画布看起来模糊的方式对其进行插值（见下文 [sic]）。
如果您要构建机票预订工具，或者构建显示 QR 码的应用，那么用户经常会希望该应用处于全屏模式，以便于扫描，因此控制图片渲染至关重要。
如果您有兴趣了解实现方式，请查看问题 317991（此问题仍处于未解决状态，以便实现锐化边缘值）。为问题添加星标以跟踪实现情况）。