web-dev-qa-db-fra.com

Mise à l'échelle des images par CSS: existe-t-il une alternative webkit pour -moz-crisp-edge?

J'ai une image de 100x100 en pixels. Je veux lui montrer deux fois la taille, donc 200x200 et je veux le faire par CSS et (explicitement) pas par le serveur.

Depuis quelques années, les images sont anticrénelées par tous les navigateurs au lieu de faire une échelle par pixel.

Mozilla permet de spécifier l'algorithme: rendu d'image: -moz-crisp-edge; IE aussi: -ms-interpolation-mode: le plus proche voisin;

Une alternative connue au webkit?

cssimagefirefoxwebkitscaling
39
Martin Kool

Malheureusement, il semble que cette fonctionnalité soit absente dans WebKit. Voir ce rapport de bogue récent:

https://bugs.webkit.org/show_bug.cgi?id=40881

15
VoteyDisciple

WebKit prend désormais en charge la directive CSS:

image-rendering:-webkit-optimize-contrast;

Vous pouvez le voir en action en utilisant Chrome et la dernière image de cette page:
http://phrogz.net/tmp/canvas_image_zoom.html

Les règles utilisées sur cette page sont:

.pixelated {
  image-rendering:optimizeSpeed;             /* Legal fallback */
  image-rendering:-moz-crisp-edges;          /* Firefox        */
  image-rendering:-o-crisp-edges;            /* Opera          */
  image-rendering:-webkit-optimize-contrast; /* Safari         */
  image-rendering:optimize-contrast;         /* CSS3 Proposed  */
  image-rendering:crisp-edges;               /* CSS4 Proposed  */
  image-rendering:pixelated;                 /* CSS4 Proposed  */
  -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
}
87
Phrogz

En plus de @Phrogz réponse très utile et après avoir lu ceci: https://developer.mozilla.org/en-US/docs/CSS/image-rendering

Il semble que le meilleur CSS serait le suivant:

image-rendering:optimizeSpeed;              /* Legal fallback                 */
image-rendering:-moz-crisp-edges;           /* Firefox                        */
image-rendering:-o-crisp-edges;             /* Opera                          */
image-rendering:-webkit-optimize-contrast;  /* Chrome (and eventually Safari) */
image-rendering:crisp-edges;                /* CSS3 Proposed                  */
-ms-interpolation-mode:bicubic;             /* IE8+                           */
2
Dominic