通过CSS样式缩放图片导致图片模糊的解决方案

在进行前端页面开发的过程中，通过使用CSS对图片进行等比例缩放，存在会使图片失真的情形。这种情况有点违反我们的通常认知，毕竟放大图片会使图片失真这很正常，但是缩小图片通常应该会使图片变清晰才对。目前我查找了很多资料都还没发现哪篇文章有深入分析其中的原理，姑且认为这是浏览器根据CSS样式显示图片的策略不同于常规图片查看软件。

那么遇到这种情况，有什么解决方案呢？

• 方案一：使用CSS3的image-rendering属性

  .img {
      image-rendering:-moz-crisp-edges;
      image-rendering:-o-crisp-edges;
      image-rendering:-webkit-optimize-contrast;
      image-rendering: crisp-edges;
      -ms-interpolation-mode:nearest-neighbor;
  }

  原理就是浏览器会根据该属性的不同属性值来选择算法，对图片进行处理。
  具体使用方法可以查看MDN的image-rendering说明。
  但是目前改属性的兼容性并不理想

  • 方案二：根据不同分辨率准备对应的图片
    略显繁琐，但比较保险的做法。

  • 方案三：使用SVG
    最简单的方案，对于简单的图形图片比较使用，但是不适合用于人物、风景之类的图片。