網頁開發人員一直都在使用圖片,在大多數情況下,瀏覽器特別擅長根據網站設計的邊界縮放圖片,同時也能美化圖片。但如果想控制瀏覽器縮放網頁上圖片的方式,該怎麼辦?
Chrome 41 (Beta 版於 2015 年 1 月推出 Beta 版) 推出了新的 CSS 屬性 image-rendering: pixelated
(規格),可讓您進一步控管瀏覽器轉譯放大圖片的方式。
CSS 屬性 image-rendering
和 pixelated
值非常有趣,因為這類屬性會關閉瀏覽器的標準平滑縮放功能 (通常是雙線性內插),並在調整圖片大小時,以其他縮放演算法 (通常最接近鄰點) 取代。
假設您有一張 2×2 像素的圖片,但是當您將圖片放大至 100×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 屬性之前,瀏覽器會以看起來模糊的方式插入畫布 (請見下方的 [sic]。
如果您正在製作航空公司售票工具,或是應用程式可以顯示QR code,使用者常會希望以全螢幕顯示,方便瀏覽,因此重要的是,控管圖片算繪方式是非常重要的。
如果您想查看導入結果,請參閱問題 317991 (這個選項會保持開啟,讓您瞭解如何導入最尖端的值)。為問題加上星號,以便追蹤實作情形)。