Масштабирование изображений с помощью CSS: есть ли альтернатива webkit для -moz-crisp-edge? - PullRequest
Новая
       44

Масштабирование изображений с помощью CSS: есть ли альтернатива webkit для -moz-crisp-edge?

39 голосов
/ 10 октября 2010

У меня есть изображение размером 100x100 в пикселях.Я хочу показать его в два раза больше, поэтому 200x200, и я хочу сделать это с помощью CSS, а не (явно) сервером.

Через несколько лет изображения сглаживаются всеми браузерами вместо того, чтобы делатьмасштаб в пикселях.

Mozilla позволяет указать алгоритм: рендеринг изображения: -moz-crisp-edge;Так ли IE: -ms-интерполяционный режим: ближайший сосед;

Любая известная альтернатива webkit?

Ответы [ 3 ]

86 голосов
/ 17 января 2012

WebKit теперь поддерживает директиву CSS: 

image-rendering:-webkit-optimize-contrast;

Вы можете увидеть, как она работает в действии, используя Chrome, и последнее изображение на этой странице:
http://phrogz.net/tmp/canvas_image_zoom.html

Правилана этой странице используются: 

.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+           */
}
15 голосов
/ 10 октября 2010

К сожалению, похоже, что эта функция отсутствует в WebKit. Смотрите этот недавний отчет об ошибке:

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

2 голосов
/ 21 ноября 2012

В дополнение к @Phrogz очень полезный ответ и после прочтения этого: https://developer.mozilla.org/en-US/docs/CSS/image-rendering

Кажется, что лучший 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+                           */
...