Масштабирование изображения с пикселями в HTML / CSS?

Question

В моем DIV я хочу показать определенную часть изображения (эта часть составляет 8x8 пикселей) (на оригинальном изображении для просмотра 8x8 пикселей вы должны сделать background-position: -8px -8px;), но увеличенныйс «сохраненными пикселями».Таким образом, вы получаете http://piclair.com/86m3r при увеличении вместо http://piclair.com/lxn12

Если кто-нибудь сейчас, как этого добиться, пожалуйста, сообщите мне.Мне действительно нужно решить эту проблему!

Answer 1

Масштабирование изображений обрабатывается разными браузерами по-разному, и нет официального способа указать, как масштабируются эти изображения.

Однако, Firefox 3.6 и выше позволит вам указать image-rendering в CSS. Вы можете включить его с помощью этого CSS:

img {
    image-rendering: -moz-crisp-edges;
}

См. Статью о рендеринге изображений на веб-сайте Mozilla для получения более подробной информации - это также относится к «фоновым изображениям любого элемента», что звучит так, как вам нужно.

Answer 2

Более полный список свойств интерполяции изображений CSS можно найти здесь: http://www.danolsavsky.com/article-images-interpolation-browser-rendering-and-css-resizing.html

Firefox:

image-rendering: optimizeSpeed;

image-rendering: optimizeQuality;

image-rendering: -moz-crisp-edges;

Опера:

image-rendering: -o-crisp-edges;

Хром:

image-rendering: -webkit-optimize-contrast;

IE 8 +:

-ms-interpolation-mode: nearest-neighbor;

W3C стандарт:

image-rendering: optimize-contrast;