2016 年 6 月 16 日

object-fit: 方便的图片居中方法

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

先看预览:

北京网站建设资讯 - object-fit: 方便的图片居中方法 - (1)

查看详细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

最新文章

  1. 网站改版要注意什么事项
  2. 自助建站怎么样?需要考虑哪些方面?
  3. 企业建站用什么CMS建站系统会更好 三大系统优缺点对比
  4. 开源CMS系统哪个比较好 如何选择
  5. 企业外贸网站制作的要求及注意事项
  6. 如何做好网站建设方案的制定 这些一定要懂
  7. 怎样知道一个网站是否需要重新设计
  8. 好的网页设计需要注意什么事项
  9. 网站改版不可忽略的重要原则
  10. 免费有效的网站推广方法有哪些

最新案例