Chrome中使用object-fit: cover导致图片像素化问题咨询

结论 #

这并非Chrome的Bug，而是Chrome与FireFox的图像缩放渲染算法差异造成的表现不同。

原因分析 #

Chrome和FireFox在处理object-fit: cover这类需要同时裁剪、缩放图像的场景时，默认采用的渲染策略有区别：

• FireFox默认使用的缩放算法更侧重平滑度，对图像边缘、细节的处理更柔和，不会出现明显像素化
• Chrome在部分缩放场景（比如特定尺寸比例、图像分辨率与容器不匹配时），默认算法偏向性能优先，容易导致细节丢失、出现像素块

通用解决方法 #

不用局限于本地临时修复，试试这些跨设备通用的方案：

• 给图片添加image-rendering: -webkit-optimize-contrast;，针对Chrome/WebKit内核强制优化细节渲染
• 或者尝试image-rendering: crisp-edges;，不过这个会让边缘更锐利，需要根据实际效果调整
• 尽量让图片原始分辨率接近卡片容器的显示尺寸，减少过度缩放——比如卡片是300x300，就用300x300或600x600（2倍图）的素材，避免用远小于或远大于容器的图片

补充说明 #

不同品牌配置的电脑都出现这个问题，说明不是本地环境（比如显卡驱动、硬件加速）的个别问题，而是Chrome内核本身的渲染特性差异。后续Chrome可能会调整默认算法，但目前可以通过上述CSS属性统一跨浏览器的显示效果。

内容的提问来源于stack exchange，提问作者Skin_phil