image-rendering提供一个提示，关于算法应使用缩放图像浏览器。
该属性适用于元素本身，以及元素的其他属性中提供的任何图像。它对未缩放的图像没有影响。例如，如果图像的自然尺寸是
100×100像素，但页面作者将其尺寸指定为200×200px（或50×50px），则图像将使用指定算法放大（或缩小）到新尺寸。由于用户交互（缩放），缩放也可能适用。
语法
auto | crisp-edges | pixelated
/* Keyword values */
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
/* Global values */
image-rendering: inherit;
image-rendering: initial;
image-rendering: unset;
auto默认值，应使用最大化图像外观的算法来缩放图像。特别地，“平滑”颜色的缩放算法是可接受的，例如双线性插值。这适用于照片等图像。从版本1.9（Firefox 3.0）开始，Gecko使用双线性重采样（高质量）。
crisp-edges必须使用保留图像中的对比度和边缘的算法来缩放图像，并且不会在处理中使图像变得光滑或模糊。这是用于图像，如像素艺术。
pixelated当向上缩放图像时，必须使用“最近邻居”或类似的算法，以便图像看起来由大像素组成。缩小时，这与“自动”相同。
optimizeQuality和optimizeSpeed存在于早期草案（并从其SVG对应未来）定义为同义词的auto值。
实例DEMO-1
.image-cons-1 img:nth-child(3){
width: 350px;
}
.image-cons-1 ul{
maging: 0;padding: 0;
overflow: hidden;
}
.image-cons-1 ul li{
float: left;
list-style: none;
padding: 0 10px;
}
.image-cons-1 ul li input{
vertical-align: middle;
}
<div style="padding:0 30px 30px 30px;">
<h3>选择查看对比效果</h3>
<div class="image-cons-1">
<img src="./assets/images/pixel-art-small.png" alt="">
<ul>
<li>
<input type = "radio" name = "imageRender" id = "auto" value = "auto" checked = "checked" @click="changeTab" />
<label for = "auto">auto</label>
</li>
<li>
<input type = "radio" name = "imageRender" id = "renderPixelated" value = "pixelated" @click="changeTab" />
<label for = "renderPixelated">pixelated</label>
</li>
<li><input type = "radio" name = "imageRender" id = "crispEdges" value = "crisp-edges" @click="changeTab" />
<label for = "crispEdges">crisp edges</label></li>
</ul>
<img src="./assets/images/pixel-art-small.png" :style = "{'image-rendering': valueStr}" alt="">
</div>
</div>
效果
image.png
实例DEMO-2
body{
--size: 50px;
}
.image-cons {
height: 400px;
display: flex;
align-items: center;
justify-content: center;
padding: 80px;
background: rgba(180,160,120,.1);
position: relative;
}
input[type="range"] {
position: absolute;
top: 30px;
left: 10px;
width: calc(100% - 20px);
background: #ccc;
-webkit-appearance: none; /*去除默认样式*/
height: 10px;
border-radius: 5px;
-webkit-border-radius: 5px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;/*去除默认样式*/
cursor: default;
top: 0;
height: 20px;
width: 20px;
transform: translateY(0px);
background: #fff;
border-radius: 15px;
border: 5px solid #006eb3;
}
img {
width: var(--size);
margin: 10px;
}
img:nth-child(2) {
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
<div style="padding:0 30px 30px 30px;">
<h3>滑动观察放大之后的对比效果</h3>
<div class="image-cons">
<img src="./assets/images/pixel-girl-head.png" alt="">
<img src="./assets/images/pixel-girl-head.png" alt="">
<input type="range" min="20" max="500" value="50" v-on:input="changeInput">
</div>
</div>
image.png
兼容性：
浏览器支持
image.png
参考资料：
