Ridimensionamento delle immagini da CSS: esiste un'alternativa al webkit per -moz-crisp-edges?

Question

Ho un'immagine che è 100x100 in pixel. Voglio mostrarlo il doppio delle dimensioni, quindi 200x200 e voglio farlo da CSS e (esplicitamente) non dal server.

Da alcuni anni, le immagini diventano anti-alias da tutti i browser invece di eseguire una scala per pixel.

Mozilla consente di specificare l'algoritmo: image-rendering: -moz-crisp-edges; Così fa IE: -ms-interpolation-mode: neighbor-nearest;

Qualsiasi alternativa al webkit noto?

Answer 1

Sfortunatamente, sembra che questa funzione sia assente in WebKit. Vedere questo recente bug report:

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

Answer 2

WebKit ora supporta la direttiva CSS:

image-rendering:-webkit-optimize-contrast; 

Si può vedere che funziona in azione utilizzando l'ultima immagine Chrome e in questa pagina:
http://phrogz.net/tmp/canvas_image_zoom.html

Le regole utilizzate in quella pagina sono:

.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+   */ 
} 

Answer 3

Oltre a @Phrogz risposta molto utile e dopo aver letto questo: https://developer.mozilla.org/en-US/docs/CSS/image-rendering

sembra che il miglior CSS sarebbe questo:

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+       */