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