CSS解决图片缩放变模糊不清晰

文 / @UTHEME

位图在放大尺寸后都会变得模糊不清晰,但在网页中插入图片时,即使原图非常清晰,缩小尺寸后也可能变得模糊。

使用CSS的image-rendering属性,可以解决这一问题,使用前后对比如下图所示:

CSS image-rendering属性效果演示

代码如下:

img {
    image-rendering: -webkit-optimize-contrast; /* 针对WebKit引擎 */
    image-rendering: crisp-edges; /* WebKit引擎现不支持该值,Firefox支持 */
}

仅需两条样式,缩小的图片就变得清晰了。

添加UTHEME为好友
扫码添加UTHEME微信为好友
· 分享WordPress相关技术文章,主题上新与优惠动态早知道。
· 微信端最大WordPress社群,限时免费入群。