首页 » CSS » CSS3 object-fit/object-position简单了解

最后更新于 2018年05月07日

从第一次使用yodu的主题,我就很在意他是怎么让首页的文章缩略图居中且填满设置好的大小,而且不会产生形变,然后我f12查看代码的时候看到了这个:object-fit:cover;这个cover很容易理解,和background的cover是一样的,而这个object-fit又是什么意思呢?为此我特意去看了大佬“张鑫旭”的博客,从中获益匪浅!

我个人的理解是这样的:

首先我们要清楚img他的一些结构原理,为此我就简单画个图方便理解!
-50

我们的img是一个元素,img就像是一个div一样,他包裹着里面的图片。

而img后面调用的src="xxxx.jpg"就是图片的本体,所以我们理解的时候不要想着图片img就是单纯的一张图,其实他本身是有结构的。

那么这样我们就很好理解object-fit:cover;是怎么做到的了,你就想象background是怎么样的,他就是怎么样的效果。

object-fit属性:

  • fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
  • contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此,此参数可能会在容器内留下空白。
  • cover:中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸,宽度和高度至少有一个和容器一致。因此,此参数可能会让替换内容部分区域不可见。
  • none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
  • scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

知道了object-fit的工作原理,使用起来想必会如鱼得水般畅快,然而其实不然的,我们还有一些需要注意的地方,其中第一点要注意的就是你的img的width和height的设置!其次就是兼容性!

为什么要注意img的width和height的设置?

img在没有设置宽度和高度时时,他的宽高是跟随图片本身的大小,这时你设置object-fit是“无效”的,因为object-fit是控制src:xxx.jpg的大小,但是你现在img和图片一样大,设置是有效,但是无显示效果的改变。

其次就是当有一个div包裹这img时,如:

<div>
   <img src="xxx.jpg"/>
</div>

这时如果div宽度或者高度大于img,你给img设置object-fit:cover;也是不能达到完全填满div的,你需要将img的宽度高度都可以填满div的空间,也就是img设置width:100%;height:100%;。

为什么这样写?如果到这里你还没想透,建议你多看看我画的img的结构原理!

其次就是兼容性了,我测试了下除了要兼容下ie浏览器其他的都没问题,你可以用js,也可以用纯css方案,纯css方案需要用到css3的另一个属性,叫@supports (){ }条件判断,具体你可以去查查官方文档,有一些详细说明,这边简单带过下!

代码:

html:

<div>
   <img src="xxx.jpg"/>
</div>

css

div {
    width:300px;
    height:300px;
}
img {
    min-width:100%;
    min-height:100%;
    max-height:150%;
}
@supports (display:block) {
   img {
       width:100%;
       height:100%;
       object-fit:cover;
    }
}

我们利用了ie不支持@supports的缺点,让img的width:100;/height:100%;不会作用在img上,而利用最大最小宽高来让图片保持一定比例填满,然后在现代浏览器上,由于支持supports,所以会使img的宽高都填满了div空间,加上object-fit也生效了,达到了理想的效果。

这样写后期维护简单,图片选择上也不必局限于正方形的图片大小,长方形的也可以使用,不过个人还是建议使用长宽比例不要太大的,不然ie上显示有些差强人意!

下面我们在了解下object-position!

这个属性和background-position一样的效果,就是控制图片在img的位置,默认是中点(50%,50%),并且支持负值和指定方向。

object-position: left top;
object-position: 80% 100%;
object-position: -20px 0;
object-position: left 20px bottom 20px;(这样写部分浏览器兼容有问题,建议用calc计算:object-position: calc(0 - 20px) calc(100% - 20px)

以上就是我的一些简单理解,还需要更近一步可以浏览大佬“张鑫旭”的博客文章:半深入理解CSS3 object-position/object-fit属性

  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao