CSS 中的 image-rendering 属性用于控制浏览器应如何渲染或显示图像。它指定了浏览器在放大或缩小图像时应使用的算法，以及在以不是图像固有尺寸的倍数的大小显示图像时应使用的算法。
该属性可以具有以下值：
- auto：默认值。浏览器选择图像呈现算法。
- crisp-edges：浏览器保留图像的对比度、颜色和边缘，而不会出现任何平滑或模糊。此值适用于放大或缩小的图像。
- pixelated：浏览器在缩放图像时应用像素化效果，这可能会产生复古或低分辨率的外观。
此属性可以应用于背景图像、画布元素以及内联图像。
注意：图像渲染属性可能并非在所有浏览器中都受支持，或者对某些图像类型或渲染方案的支持可能有限。
适用于
所有 HTML 元素。
DOM 语法
object.style.imageRendering = "pixelated";
CSS 图像渲染示例
以下示例演示了如何使用具有不同值的图像渲染属性：
<html>
<head>
<style>
.demoImg {
width: 300px;
height: 200px;
margin-right: 0.5in;
}
</style>
</head>
<body>
<h3>Original</h3>
<img src="images/scancode.png" alt="none">
<h3>pixelated</h3>
<img class="demoImg" style="image-rendering: pixelated;" src="images/scancode.png" alt="pixelated">
<h3>crisp-edges</h3>
<img class="demoImg" style="image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges;" src="images/scancode.png" alt="crisp-edges">
</body>
</html>
