图像质量问题与Chrome上的缩小图像但不是Firefox？

I have large images (728px by 546px) that I need to downscale in a browser (to width:179px and height:auto).

我有大图像(728像素x 546像素),我需要在浏览器中缩小(宽度:179px和高度:自动)。

When I do this in Firefox, the results looks great. But when I do this in Chrome, the exact same code and images looks different and far inferior.

当我在Firefox中执行此操作时,结果看起来很棒。但是当我在Chrome中执行此操作时,完全相同的代码和图像看起来不同而且差得多。

Is there a trick to making downscaled images look better in Chrome?

有没有一个技巧可以让Chrome中的缩小图像看起来更好?

Here is a Fiddle example...if you look at the leaves in the foreground, or the front deck hatch you'll see they look much better in Firefox:

这是一个小提琴示例......如果你看一下前景中的叶子,或者前甲板舱口,你会发现它们在Firefox中看起来好多了:

<img src='http://www.wisconsinrivertrips.com/wp-content/uploads/2014/10/DSCN0544.jpg' style='width:179px;height:auto' />

https://jsfiddle.net/qr067gg9/

Here is also a screenshot of the two side by side:

这里还有两个并排的截图:

http://i.imgur.com/J0T2GeY.png

1 个解决方案

#1

This appears to be a bug in Chrome. See here

这似乎是Chrome中的一个错误。看这里

And a possible workaround from this question:

从这个问题可能的解决方法:

img {
  width: 179px;
  height: auto;
}

.crisp {
  image-rendering:-webkit-optimize-contrast;
}

<img src='http://www.wisconsinrivertrips.com/wp-content/uploads/2014/10/DSCN0544.jpg' />

<img class="crisp" src='http://www.wisconsinrivertrips.com/wp-content/uploads/2014/10/DSCN0544.jpg' />

#1