Geek asks and answers

Scaling an image using pixels in HTML / CSS?

In my DIV I want to show a certain part of the image (this part is 8x8 pixels) (in the original image to view 8x8 pixels you need to make a background position: -8px -8px;), but enlarged with "saved pixels". This way you get http://piclair.com/86m3r when scaling instead of http://piclair.com/lxn12

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

+3
source share
2 answers

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;

+1
source

Image scaling is handled differently by different browsers, and there is no official way to indicate how these images scale.

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

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

See the image-rendering article on the Mozilla website for more details - this also applies to “background images of any element” that sounds like you.

+4
source

More articles:


All Articles