使用HTML / CSS中的像素缩放图像？

Question

在我的DIV中，我想要显示图像的特定部分（该部分是8x8像素）（在原始图像上查看8x8像素，你必须做背景位置：-8px -8px;），但是放大了用“像素保存”。 因此，当您按比例缩放而不是http://piclair.com/86m3r

时，您会获得http://piclair.com/lxn12

如果有人现在如何实现这一目标，请告诉我。我真的需要解决这个问题！

Answer 1

图像缩放由不同浏览器以不同方式处理，并且没有官方方式来指定这些图像的缩放方式。

但是，Firefox 3.6及更高版本将允许您在CSS中指定image-rendering。您可以使用此CSS启用它：

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

有关详细信息，请参阅Mozilla网站上有关image-rendering的文章 - 它也适用于“任何元素的背景图像”，这听起来就像您所追求的那样。

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;