专栏首页京程一灯CSS | object-fit: 炒鸡方便的图片居中方法

CSS | object-fit: 炒鸡方便的图片居中方法

今天在项目中遇到图片居中的问题,嗯,之前也有写过解决这个问题的文章,有n种方法。不过今天要说一个新的方案:object-fit ,嗯,这个才是真的方便的方案啊。

先看预览:

查看详细demo

object-fit 只能用于『可替换元素』(replaced element) 。所谓可替换元素,是指元素的内容和表现不是由CSS控制的,独立渲染的外部元素,比如: imgobjectvideo 和 表单元素,如textareainputaudiocanvas在一些特殊情况下,也可以作为可替换元素。

在使用 object-fit 时,一定要设定元素的size,也就是 widthheight

直入正题,object-fit 有五个可选值,分别是:

  • fill 默认值。填充,可替换元素填满整个内容区域,可能会改变长宽比。
  • contain 包含,保持长宽比,保证可替换元素完整显示,长宽比和内容区域的长宽比不一致时,内容区域会出现空白。
  • cover 覆盖,保持长宽比,保证内容区域被填满,所以可替换元素可能会被切掉一部分,从而不能完整展示。
  • none 顾名思义,就是什么都没有啦,当然不是什么都没有啦,而且千万不要以为和fill是一样的!实际效果是,保持可替换元素原尺寸和比例。
  • scale-down 等比缩小。效果类似 containnone

用法也超级简单:

.cover{    object-fit: cover;
}.contain{    object-fit: contain;
}.fill{    object-fit: fill;
}.scale-down{    object-fit: scale-down;
}

one more thing

object-position

当元素被 object-fit 裁切的时候,你一定想知道如何控制裁切的位置。 嗯,顾名思义, object-position 就是为了解决这个问题的。

不过,object-position 不难理解,类似 background-position,不多说了。

浏览器兼容性

  • IE 全家不支持,包括最新的 EDGE
  • android 4.4.4+ 支持,Chrome 29+ 支持
  • Safari 7.1+ 和 iOS 8+ 支持 object-fit,不支持object-position

本文分享自微信公众号 - 京程一灯(jingchengyideng),作者:神飞

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-08-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 理解CSS伪元素 :before 和 :after

    层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素...

    疯狂的技术宅
  • JavaScript 的 Map 指南[每日前端夜话0xC7]

    在JavaScript中,Map 是存储键/值对的对象。Map 类似于一般 JavaScript 对象【https://developer.mozilla.or...

    疯狂的技术宅
  • 使用 Node.js 构建 API 网关

    微服务框架中的服务提供了一些公用的认证和传输(业务)请求接口,用于给外部客户端调用。API Gateway提供了一个 shared layer(共享层),可用来...

    疯狂的技术宅
  • R语言入门之因子及常用函数

    因子(Factors)在R语言中通过将变量转换成因子就可以使之成为R里的名义变量,关于名义变量的概念大家可以自行百度,这里就不赘述。对于因子的理解,我们可以将...

    生信与临床
  • [820]fake_useragent.errors.FakeUserAgentError: Maximum amount of retries reached

    fake_useragent中存储的UserAgent列表发生了变动,而本地UserAgent的列表未更新所导致的,在更新fake_useragent后报错就消...

    周小董
  • 四旋翼无人飞行器自主飞行控制原理

    形式如图所示,电机1和电机3逆时针旋转的同时,电机2和电机4顺时针旋转,因此当飞行器平衡飞行时,陀螺效应和空气动力扭矩效应均被抵消。 与传统的直升机相比,四旋翼...

    机器人网
  • JetBrains WebStorm 2018.2安装方法及汉化思路

    打开之后,用记事本打开hosts文件,hosts文件路径的是C:\Windows\System32\drivers\etc\hosts,(操作如图)

    李才哥
  • Docker 网络背后的原理探索

    知其然而不知其所以然,不知也。老古人说得多好,学知识不懂得知识背后的原理,等于白学。

    CloudDeveloper
  • [PGM] I-map和D-separation

    概率图模型,究其目的,在于描述多个(单个就没有意义了)变量概率分布之间的关系。有向图模型的描述方法是有指向性的,如果两变量之间有因果关系,这种描述方法就...

    sea-wind
  • 鸡汤不给勺,就是耍流氓,成功背后的概率 (二)

    今天是过年的前的最后几天,估计也没有什么人看我的文章了,也不想写什么技术类的东西,估计也没有人看的下去,过年估计大家收到的最大的祝福就是,大发财源,赚钱多多,出...

    AustinDatabases

扫码关注云+社区

领取腾讯云代金券