html css img 图片设置宽高厚，图片失真模糊问题-已解决 image-rendering

 

定义缩放算法的

img {    

image-rendering: -moz-crisp-edges; /* Firefox */     
image-rendering: -o-crisp-edges; /* Opera */      
image-rendering: -webkit-optimize-contrast; /*Webkit (non-standard naming) */ image-rendering: crisp-edges; \
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */

}

image-rendering说明

dome：

/* Keyword values */
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

/* Global values */
image-rendering: inherit;
image-rendering: initial;
image-rendering: unset

 属性值说明：

auto：默认值。使用浏览器的标准算法最大化图像的外观；

crisp-edges：使用算法达达到在绽放时保持对比度和边缘，在加工时不平滑色彩和使用模糊

pixelated：当图片放大时，单纯地去放大像素点，缩小时与auto效果一样，即矢量化；

注：此属性可应用于背景图像、canvas元素、打印图片设置以及内联图像。重要的是要注意，这些值尤其令人困惑，因为缺乏一致的浏览器支持。

参考文献：https://my.oschina.net/u/1403186/blog/1509962