Michael

写写代码,说说人生

您好,我是Michael,欢迎来到我的个人家园。
代码搬运工,目前就职于XX证券,努力修行中。


H5 / Java / Objc / Swift / Vue / RN

用一行 CSS 居中并裁剪图片

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

img {
     object-fit: cover;
}

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

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

裁剪熊并居中

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

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

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

最近的文章

为什么BootStrap要默认12列

今天被问了一个问题:有没有想过为什么Bootstrap要默认是12列?呃,好吧,用了Bootstrap一段时间,的确没想过为什么要默认是12列,隐隐约约觉得是因为布局比较方便,常见的分2块,3块,4块,都可以方便分完。既然有假设,那还是要求证一下。谷歌上一阵搜索。 Contrary to the question’s parenthetical, Bootstrap was always at 940px wide, and not 960px, even with the origin...…

Web前端-BootStrap继续阅读
更早的文章

iOS技术大牛博客集锦

俗话说,站得高,看得远。当我们站在巨人的肩膀上,将会看的更高,走的更远!Swift开发 Swiftist社区 http://swiftist.org/ SwiftChina http://swift.sh/ Swift特刊 http://weekly.manong.io/issues/33 LearnSwiftTis http://www.learnswift.tips/ Swift课堂(视频) http://www.swiftv.cn/school国内iOS开发博客 唐巧...…

牛人博客集锦继续阅读