作为 Web 开发者,我们一直喜欢处理图片,在大多数情况下,浏览器擅长缩放图片,使其适应我们网站设计的边界,同时又能保持图片的美观。但是,如果您想控制浏览器缩放网页上图片的方式,会发生什么情况呢?
Chrome 41(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])。
如果您要开发机票工具或显示二维码的应用,那么用户经常会希望它全屏显示以便于浏览,因此控制图片渲染至关重要。
如果您想查看实现效果,请参阅问题 317991(对于清晰值实现,问题尚未关闭。给问题加注星标,以便跟踪实施情况)。