用一行 CSS 居中并裁剪图片

471 查看

设置图片的裁剪尺寸非常简单,你只需在 CSS 里使用这行代码:

就是这样。不需要语义、包装 div 或者其他没意义的代码。

这种技术能很好地把大小不合适的头像图片裁剪为正方形或者圆形的图片。以下面那只熊的宽图片来举例。一旦把 object-fit:cover 技术应用在这种图片上,并且设置好,图片自己就会进行裁剪和居中。

object-fit:cover 的裁剪方式和 background-size:cover 的完全相同,不过它是用来为 imgsvideos 和其他的媒体标签设置样式的,而不是给背景图片设置样式。

相当多的最新浏览器都支持 object-fit 技术,并且还有 polyfill 项目让你能在更老的浏览器(IE8+)里使用该技术。

object-fit 的其他属性感兴趣?来尝试一下