css 设置图片宽高后，图片变模糊的问题

Question

在css中设置了宽高缩小图片后，图片变得模糊

.change-by-css { width:300px; height:300px; display:inline-block; }
.change-by-css img { width: 100%; height: auto; max-width: 100%; }
.change-by-ps { display:inline-block; }

<div class="src">
    <img src="./123.jpg" />
</div>

<div class="change-by-css">
    <img src="./123.jpg" />
</div>

<div class="change-by-ps">
    <img src="./1234.jpg" />
</div>

运行结果如下：

可以看到，用代码缩小图片后，特别是麦穗的部分，相比于用PS变小，明显模糊了不少
实际工作中的图片有些比这个例子体现的还要明显，有没有什么好办法解决啊？

如果是响应式布局，图片自适应的话，设计常常会给出一张很大的图片，如果用这样的代码适应各个屏幕大小，这样不是有很多屏幕的图片都有些模糊？

谢谢大家~

Answer 1

亲测有效：

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) */

}

Answer 2

.change-by-css img { width: 100%;}这样就可以了,试一试。看一下

Answer 3

你只考虑了宽度，实际上图片的分辨率还得考虑高度的影响，如果是横图还好说，纵图你只管宽度不管长度肯定是要出问题的。
长度大于宽度的图，你试试

height:100%;

Answer 4

楼主找到原因了吗,我也遇到同样的困扰

Answer 5

一般来说，图片只能设置宽或者高，这样才能保证正常的宽高比，不然会被压缩变形，为了处理某一边溢出，我们可以为其设置一个max-width或max-height

Answer 6

代码是一方面，最好解决方法就是从设计图片本身出发，将图片设计成与布局中宽度高度成等比例图片，比如你布局时候图片宽度为300px，高度为200px,那你设计图片素材时候提交添加的图片宽度高度本身可以为600px宽，400px高，或900px宽600px高,这样等比例的图片才能保证真正图片缩小后不变形，显示完整。

Answer 7

我也遇到了同样的问题，还不知道是什么原因，感觉可能是和高度有关，如果不写宽度，它是根据父级的宽度来缩放显示，没有父级是浏览器宽度，它很清晰。但是图片显示太大我需要限制它本身的大小，或许你不要把它写成100%；我的图片写成20%和原来的一样清楚，还有就是写成固定px不用%也很清晰，像素适配可能会有点不太方便。

img{width:20%;}
img{width:300px;}

Answer 8

我也遇到了这个问题，请问有解决办法了吗？烦请告知，感激不尽~
楼上image-rendering的办法我试过了，从理论上来说这个元素是定义缩放算法的，但是并不能解决，我是头像缩略图，没有改变原图的比例，缩小大概10%。用了image-rendering之后反而因为锐化严重更模糊了。
同时，我这边相同代码在mac上显示清晰，但在windows上显示异常。

Answer 9

楼主还是没有找到答案是吗