微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

用一行 CSS 居中并裁剪图片

2015-07-26 20:01 前端大全

(点击上方,可快速关注)


作者:侯振宇(@侯振宇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

 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 HTML5 表单 从源码角度看finish()方法的执行流程 【T Insight】店长选聘,没必要硬将萝卜训练成人参 Android Patch 方案与持续交付 20个非常棒的Material Design设计概念案例