Désactiver l'anticrénelage lors de la mise à l'échelle des images
Duplicata possible:
Comment étirer des images sans antialiasing
Est-il possible de désactiver l'anticrénelage lors de la mise à l'échelle d'une image?
En ce moment, je reçois quelque chose qui ressemble à ceci:
En utilisant le code CSS suivant:
#bib { width:104px;height:104px;background-image:url(/media/buttonart_back.png);background-size:1132px 1360px;
background-repeat:no-repeat;}
Ce que je voudrais, c'est quelque chose comme ceci:
En bref, tout indicateur CSS pour désactiver l'anticrénelage lors de la mise à l'échelle des images, en préservant les bords durs.
Tout piratage javascript ou similaire est également le bienvenu.
(Oui, je suis conscient que php et imagemagick peuvent également le faire, mais préféreraient une solution basée sur css.)
[~ # ~] mise à jour [~ # ~] Les suggestions suivantes ont été suggérées:
image-rendering: -moz-crisp-edges;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;
Mais cela ne semble pas fonctionner sur les images d'arrière-plan.
Essayez ceci, c'est un correctif pour le supprimer dans tous les navigateurs.
img {
image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
image-rendering: pixelated; /* Chrome */
image-rendering: optimize-contrast; /* CSS3 Proposed */
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
}
Sources:
http://nullsleep.tumblr.com/post/16417178705/how-to-disable-image-smoothing-in-modern-web-browsers
http://updates.html5rocks.com/2015/01/pixelated
GitaarLAB
CSS qui fonctionne dans Firefox uniquement:
img { image-rendering: -moz-crisp-edges; }
Cela a fonctionné pour moi (firefox 16.) 