Search code examples
htmlcsspixelgraphic

Scaling up image with pixels in HTML/CSS?


In my DIV I want to show a specific part of an image (that part is 8x8 pixels) (on the orginal image to view tose 8x8pixels you would have to do background-position: -8px -8px;), but enlarged with the "pixels saved". So you get http://piclair.com/86m3r when scaled up instead of http://piclair.com/lxn12

If anyone now how to achieve this, please tell me. I really need to solve this problem!


Solution

  • A more complete list of CSS image interpolation properties can be found here: 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;

    Opera:

    image-rendering: -o-crisp-edges;

    Chrome:

    image-rendering: -webkit-optimize-contrast;

    IE 8+:

    -ms-interpolation-mode: nearest-neighbor;

    W3C standard:

    image-rendering: optimize-contrast;