1

Chrome version Version 55.0.2883.87 (64-bit)

I have an image that has 225px width. If I just scale it down by 1px, the image becomes very blurry. It doesn't happen with FF.

Here's an example : https://jsfiddle.net/keqx1vt8/2/

li {
  list-style-type: none;
  width: 224px;
}

img {
  max-width: 100%;
}

<ul>
    <li><img src="http://i.imgur.com/Ks3QUUr.png"></li>
</ul>

The image is 225px, I put a max-width of 224px. The single pixel makes a big difference in the image quality (only in Chrome). I have tried playing with image-rendering without much success.

Michael Villeneuve
  • 3,933
  • 4
  • 26
  • 40
  • Does not look any different from 224-225 to me in Chrome. – Jordan.J.D Feb 23 '17 at 15:16
  • For what it's worth, I can definitely see a difference between the 2 values. So I imagine it's likely to be a half pixel or something that's showing because it can't work out the ratio to a full pixel – Andy Holmes Feb 23 '17 at 15:17
  • The problem I want to solve is that when my image start to adapt to different screens the quality of the images just goes down the drain :/ I've never had this issue before... – Michael Villeneuve Feb 23 '17 at 15:20
  • 1
    See I'm having a similar issue... tried using this: `image-rendering: -webkit-optimize-contrast;` except it makes my images look like garbage... Speaking of which, chrome on a retina machine ( macos ) display the images fine. But on my cinema display I get the blurriness too – Squivo Feb 28 '17 at 23:16
  • Ahhh :( really annoying, if you find something please let me know ! – Michael Villeneuve Mar 01 '17 at 19:05

0 Answers0