web-dev-qa-db-fra.com

Images à échelle réduite floues en Chrome

J'utilise des gravatars et c'est assez souvent lorsque je les réduit avec CSS, et je crois que Google Chrome le faisait correctement jusqu'à récemment (je peux me tromper, je ne sais pas exactement quand le problème a commencé à mais maintenant, les images deviennent floues lors de la réduction d'échelle, et cela ne se produit que dans Chrome, la réduction d'échelle FF est plutôt bonne. J'ai essayé d'utiliser image-rendering mais cela ne résout pas le problème. Quelqu'un peut-il me donner un indice sur la meilleure façon de procéder?

L'exemple peut être trouvé ici , ouvrez-le dans Chrome puis dans FF, il devrait être beaucoup plus flou dans Chrome que en FF.

Merci

25
NoDisplayName

J'ai trouvé exactement le même problème sur Mac: Firefox réduit vraiment bien l'image, tandis que chrome la rend floue, ce qui est très mauvais. Je me fiche du temps ou de la vitesse de rendu, je besoin du logo pour avoir l'air BON!

J'ai trouvé les correctifs de règles CSS suivants Chrome pour Mac

image-rendering: -webkit-optimize-contrast;
58
pastullo

Je propose une autre piste car j'étais dans la même situation: images légèrement floues sous chrome mais impeccable sous firefox. Ctrl + "0" résolu le problème. J'ai dû un jour utiliser le zoom (Ctrl + "+" ou "-") et ne l'a pas réinitialisé complètement ...

0
delaio

J'ai trouvé que la meilleure façon de résoudre ce problème est d'utiliser simplement un svg. Une autre option consiste à utiliser des requêtes multimédia CSS pour charger des tailles d'images adaptatives.

0
ShaneDaugherty