渲染放大的图片image-rendering笔记

image-rendering: pixelated，控制浏览器如何渲染放大的图片，比如图像的自然尺寸为100×100像素，但网页指定其尺寸不为100*100像素时，关闭浏览器标准的平滑缩放（通常为双线性内插法），使用其他算法（通常为最近邻法）。使用场景：游戏适配、票据和QR code展示等。而且这个属性可以应用于img，canvas和background-image中。

Syntax

image-rendering: auto; //使用默认算法，即将图片色彩进行平滑缩放，不同的浏览器采用的算法不一 image-rendering: crisp-edges; //使用算法达达到在绽放时保持对比度和边缘，在加工时不平滑色彩和使用模糊 image-rendering: pixelated; //当图片放大时，单纯地去放大像素点，缩小时与auto效果一样 /* Global values */ image-rendering: inherit; image-rendering: initial; image-rendering: unset;

代码实例：

image-rendering: auto;

78%

1

100%

1

138%

1

image-rendering: pixelated;

78%

1

100%

1

138%

1

image-rendering: crisp-edges;

78%

1

100%

1

138%

1