木灵鱼儿

博客
正在进入:首页

更新于

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

发布于 / 分类: CSS / 暂无评论 / 阅读量: 1390

从第一次使用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属性

Info
Site Info

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了185篇文章

目录树
Archive
Article Archive
Weather
Weather

湿度
设置
配色方案

宽度

现在购买