(点击上方公众号，可快速关注)

作者：侯振宇（@侯振宇hzy）

网址：http://www.cnblogs.com/sskyy/p/4592353.html

点击“阅读原文”可查看本文网页版

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

img {

object-fit: cover;

}

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

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

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

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

---

前端大全

微信号：FrontDev

打造东半球最好的 前端技术 微信号

--------------------------------------

商务合作QQ：2302462408

招聘和猎头服务QQ：2302462408

投稿网址：top.jobbole.com