Ridimensionamento dell’immagine tramite CSS: esiste un’alternativa al webkit per -moz-crisp-edges?

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

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

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

Qualche alternativa al webkit conosciuta?

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

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

    WebKit ora supporta la direttiva CSS:

    image-rendering:-webkit-optimize-contrast; 

    Puoi vederlo in azione utilizzando Chrome e l’ultima immagine 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+ */ } 

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