Scaling up image with pixels in HTML/CSS?

Question

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!

You are looking to do "nearest neighbor" scaling instead of "bilinear scaling". — sourcenouveau, Mar 20 '11 at 23:12

score 4 · Answer 1 · answered Mar 20 '11 at 23:20

4

Image scaling is handled by different browsers in different ways, and there's no official way to specify how these images are scaled.

However, Firefox 3.6 and above will let you specify image-rendering in CSS. You can enable it with this CSS:

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

See the article on image-rendering on the Mozilla website for more details — it also applies to "background-images of any element", which sounds like what you're after.

answered Mar 20 '11 at 23:20

Sam Starling

5,298
3
35
52

2

There's also [`-ms-interpolation-mode`](http://msdn.microsoft.com/en-us/library/ms530822(VS.85).aspx) for IE7+, but I can't find a Safari equivalent. Check out [this other, similar question](http://stackoverflow.com/questions/388492/firefox-blurs-an-image-when-scaled-through-css-or-inline-style). – Sam Starling Mar 20 '11 at 23:22
Damn, I need a webkit solution :/ – Jeremy Karlsson Mar 21 '11 at 18:51
You could always use an SVG version of that image as well, which is a vector and so will scale to any size and remain looking crisp. – Sam Starling Mar 21 '11 at 18:53
It has to be in .png, the image is loaded from Minecraft.net – Jeremy Karlsson Mar 22 '11 at 07:50

score 1 · Accepted Answer · answered Jun 05 '13 at 21:39

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;

Scaling up image with pixels in HTML/CSS?

2 Answers2