使用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網站上有關圖像渲染的文章 - 它也適用於“任何元素的背景圖像”，這聽起來就像您所追求的那樣。

Answer 2

可以在此處找到更完整的CSS圖像插值屬性列表： http ： //www.danolsavsky.com/article-images-interpolation-browser-rendering-and-css-resizing.html

火狐：

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;