CSS设置max-width:100%缩放图片时分辨率丢失的修复方法

嘿，我帮你搞定这个图片缩小后模糊的问题～

为什么图片缩小会模糊？怎么修？ #

其实这大多是浏览器默认用了低质量的图片缩放算法导致的，明明原图很清晰，缩完就变糊了。你只需要给图片加上几个CSS属性，强制浏览器用高质量的缩放方式就行：

把你的图片样式更新成这样：

.image img {
  border-radius: 0px;
  display: block;
  /* 关键：强制高质量缩放 */
  image-rendering: crisp-edges; /* 标准属性，优先用，保留清晰边缘 */
  image-rendering: -webkit-optimize-contrast; /* 适配Safari和旧版Chrome */
  -ms-interpolation-mode: bicubic; /* 给IE老版本留个兼容 */
}

.image.main img {
  width: 100%;
}

要是你用的是像素风格的图片，把crisp-edges换成pixelated会更合适，能完美保留像素感。

你的代码还能简化哦！ #

看你现在的多类选择器有点冗余，我帮你合并一下，减少重复代码的同时效果不变：

/* 所有.image通用样式 */
.image {
  border-radius: 4px;
  border: 0;
  display: inline-block;
  position: relative;
}

/* .image.main的特殊样式（继承通用样式） */
.image.main {
  display: block;
  margin: 0 0 1.5em 0;
  max-width: 100%;
}

/* 所有.image下的img通用样式（把.main img的width移到这里，省得重复写） */
.image img {
  border-radius: 0;
  display: block;
  width: 100%;
  /* 加上高质量缩放属性 */
  image-rendering: crisp-edges;
  -webkit-optimize-contrast;
  -ms-interpolation-mode: bicubic;
}

/* .image.small的特殊内边距 */
.image.small {
  padding: 2.5em 6em 0.8em 6em;
  max-width: 100%;
}

这样改完，代码更整洁，所有.image里的图片都会自动应用高质量缩放规则啦。

额外提醒 #

• 确认你的example.png原图尺寸是大于最终显示尺寸的哦，要是原图本身比显示区域小，那放大才会糊，缩小的话只要加了上面的属性就没问题。
• 你之前试的Picturefill其实是用来做响应式不同分辨率图片适配的，不是解决缩放模糊问题的，所以用不上啦，纯CSS就搞定了。

内容的提问来源于stack exchange，提问作者Awesome_girl