CSS3 object-fit/object-position简单了解

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

我个人的理解是这样的：

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

我们的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属性