身為網頁開發人員，我們經常會處理圖片，在大多數情況下，瀏覽器都能很好地調整圖片大小，以符合網站設計的邊界，同時確保圖片美觀。不過，如果您想控制瀏覽器如何縮放網頁上的圖片，該怎麼做呢？
Chrome 41 (2015 年 1 月的 Beta 版) 推出了新的 CSS 屬性 image-rendering: pixelated (規格)，可讓您進一步控制瀏覽器如何顯示放大的圖片。
CSS 屬性 image-rendering 和值 pixelated 很有趣，因為在調整圖片大小時，它們會關閉瀏覽器的標準平滑縮放功能 (通常是雙線性內插)，並以其他縮放演算法 (在大多數情況下為最近鄰) 取代。
假設您有一個 2 x 2 像素的圖片，並將其放大至 100 x 100 像素，瀏覽器會以不會使圖片看起來有塊狀的形式進行算繪。例如：
在許多情況下，您可能不希望採用這種平滑化行為，而是使用可保留更準確圖像表示方式的方法。
如要獲得這項效果，只需按照下列步驟將 image-rendering: pixelated; 套用至圖片即可。
<img
style="image-rendering: pixelated;"
width="100" height="100"
src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">
試用示範模式。如您所見，屬性的套用方式會對圖片的算繪方式產生重大影響。
這個屬性可套用於多個位置：
<img>個元素<canvas style="image-rendering: pixelated">個元素- 任何含有
background-image屬性的元素
我還是沒聽清楚。我該在哪裡使用這項功能？
如果您只是在網站上顯示相片，那麼您可能不需要這項功能。
遊戲就是一個很好的用途，您經常必須放大畫布，才能正確配合螢幕大小。在這個 CSS 屬性推出之前，瀏覽器會以會產生模糊效果的方式對畫布進行內插 (請參閱下方說明)。
如果您正在建構航空公司票務工具，或是顯示 QR code 的應用程式，使用者通常會希望以全螢幕顯示，以利掃描，因此控制圖片算繪作業至關重要。
如果您想瞭解實作方式，請查看 Issue 317991 (這個問題仍未解決，因為我們還在實作鮮明邊緣值。為問題加上星號，以便追蹤實作進度)。