Skalowanie obrazu według CSS: czy istnieje alternatywa dla webkita dla -moz-crisp-edges?

Question

Mam obraz o wielkości 100x100 w pikselach. Chcę pokazać dwa razy większy rozmiar, więc 200x200 i chcę to zrobić przez CSS i (jawnie) nie przez serwer.

Od kilku lat obrazy są wygładzane we wszystkich przeglądarkach, a nie w skali pikseli.

Mozilla pozwala określić algorytm: renderowanie obrazu: -moz-ostry-brzegi; Podobnie dzieje się z IE: -ms-interpolation-mode: nearest-neighbour;

Dowolna znana alternatywa dla webkitów?

Answer 1

Niestety, wygląda na to, że ta funkcja nie występuje w WebKit. Zobacz ten niedawny raport o błędzie:

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

Answer 2

WebKit obsługuje obecnie dyrektywę CSS:

image-rendering:-webkit-optimize-contrast; 

widać to działa w akcji za pomocą Chrome i ostatni obraz na tej stronie:
http://phrogz.net/tmp/canvas_image_zoom.html

Zasady stosowane na tej stronie:

.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

Oprócz @Phrogz bardzo użyteczną odpowiedź i po przeczytaniu tego: https://developer.mozilla.org/en-US/docs/CSS/image-rendering

Wydaje się, że najlepiej byłoby to CSS:

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