半深入理解CSS3 object-position/object-fit属性

一、春来了，春来了~

帘外雨潺潺，春意阑珊。

奇怪，为何我要写个诗段子呢？

或许是因为，本应是阳春三月的时候，依旧阴冷潮湿，丝丝凉意侵入小腿，无法让我无法安心整理思路。想明白了这点，我立马站起身来，打开房门，大步走出去！去外面呼吸新鲜空气…………吗？不是的，我是去卧室拿遥控器，开个空调，给屋子升个温，好安安心心写点东西。

恩，预热了数分钟，暖气呼啦啦出来了。恩，春来了，春来了~~可以安心干活，想些技术的东西，而不是无故冒出奇怪的古诗词了。

二、从哪里开始呢？

可以写的点很多，从哪里开始呢？

啊，先手标题入手吧。首先是“半深入”，标题这里之所以称为“半深入”，不是因为短，而是 object-position/object-fit 自己尚未在实际项目中实践过，没有足够多实践经验的认知都不能称为“深入理解”。按照以前的调调，我会变身成萧敬腾——不生产水，只是大自然的搬运工，然后文章名称就是“CSS3 object-position/object-fit简介”，就是把官方文档中文梳理一下。但是，本文，有很多自己加工过的产出、有很多个人理解在里面的。故，综上，名曰为“半深入”。

然后就是本文主角，一对兄弟， object-position 和 object-fit 。既然是主角，肯定要不断打小怪升级的，电视剧才刚开头，所以你别指望直接高潮，慢慢来。我们不妨先来了解下这里的 object 为何物？

要了解属性名上的这个的 object , 我们还得从官方解释入手(英文)：

The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

The object-position property determines the alignment of the replaced element inside its box.

小哥，你™在逗我呢！虽然我无法洞察英文的内心，但是，我还是认得英文的长相的啊！上面两段官方解释，除了属性本身，根本就没有 object 这个单词出现过，如何解释 object 为何物？

谁说解释“菊花”就一定要出现“花”的，这里的 object 实际上指的是 replaced element (替换元素)( W3C , MDN )。

其内容不受CSS视觉格式化模型（中文释义参见 这里 ）控制的元素，比如 image , 嵌入的文档( iframe 之类)或者 applet 。比如， img 元素的内容通常会被其 src 属性指定的图像替换掉。替换元素通常有其固有的尺寸：一个固有的宽度，一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度，从而也有固有的宽高比率。另一方面，其他文档也可能没有固有的尺寸，比如一个空白的html文档。

CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。 object , video , textarea , input 也是替换元素， audio 和 canvas 在某些特定情形下为替换元素。

使用CSS的 content 属性插入的对象是匿名替换元素。

也就是说，本文的 object-position 和 object-fit 只针对替换元素有作用，也就是 form 表单家族控件系列，老牌劲旅 img 图片，HTML5新贵 video 视频等元素（据我测试，SVG元素貌似不支持，但可以作为 src 替换内容出现）。

三、为何需要object-position/object-fit?

从上面“替换元素”的官方解释可以看出，替换元素通常都有着固定的尺寸，比方说图片，例如，下面这张眼熟能详的图片：

其原本的尺寸是256*191像素。但是，现代web显示环境万变，响应式布局(适配移动端)、半响应布局(宽窄屏适配)以及传统流体布局（任意宽度水平自适应）都比较常见，结果，在处理这些有着固定尺寸的元素的时候，就会遇到障碍，例如，一个2:1的视频，永远要等比例充满容器，但是，随着浏览器宽度不一样，容器的长宽比有可能小于2，也有可能大于2. 你说，你能轻松实现小于比例2时候，视频宽度100%；比例大于2的时候，高度100%吗？

显然，很麻烦，最后大多还是使用JS去把控（如 国际版QQ首页 中的视频处理 – 浏览器宽度任意拉伸）。正是为了应对类似这样的响应式需求， object-fit 和 object-position 才应运而生。

object-fit 和 object-position 之间的关系有点类似于 background-size 和 background-position ，无论是，关系还是属性值，都有相似之处，因此，我们在理解 object-fit 和 object-position 的时候，可以或多或少映射 background-size 和 background-position 。

四、object-fit理解

CSS3 background-size 出现的比较早，大家应该知道其支持的一些值，除了数值之外，其还支持几个关键字，例如： cover , contain 等。

object-fit 也是类似的，但还是有些差异，具体有5个值：

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

每个属性值的具体含义如下（自己理解的白话文，官方释义见官网）：

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

假设我们使用的原始图片是：

容器的尺寸是160*160, 背景色是灰蓝色，同时，测试的图片高宽设置为100%, 如下CSS代码：

.box { width: 160px; height: 160px; background-color: #beceeb; } .box > img { width: 100%; height: 100%; }

结果，各个属性值的表现如下截图：

大家可以对照示意感受下，什么是内容拉伸( fill )，什么是内容全部都显示( contain )，什么是容器没有留白( cover )，什么是该多大就多大( none )。

新恒结衣，等等，等一下！ scale-down 呢？

scale-down 由于具有动态特性，所以要专门展示下。实际的替换内容表现是 none 和 contain 最终尺寸小的那个属性值的表现。

例如，假设我们的容器可以 resize 拉伸，改变其尺寸，则当容器尺寸比256*191小的时候，也就是容器比替换内容（这里的图片）实际尺寸小的时候，效果跟 contain 一致，因为此时 contain 的实际展示尺寸比 none 小。如下截图示意：

但是，当容器尺寸拉伸到比图片实际尺寸还大的时候，则效果跟 none 一致，因为此时 none 的实际展示尺寸比 contain 小。如下截图：

至此，我们大致了解了 object-fit 各个属性值的表现，你以为事情就结束了吗？不是，这只是个开始。

难道大家没有对图片的表现表示疑惑吗？

我明明图片设置了宽高都是100%, 为何貌似实际效果除了( fill )，似乎都无视了这些声明呢？图片的实际尺寸变小或变大了，而不是根据容器实际尺寸走呢？

.box > img { width: 100%; height: 100%; }

你有没有这样的疑惑？有木有！！

如果有，恭喜你，来对地方了，这表明你还没有对一些概念认识清楚。

1. img 是个元素，且是个替换元素，这个通过上面的学习应该都知道；
2. 一个图片，如果没有 src ，它依然是个替换元素，它在浏览器中的解析依然是正确的；

   <img>

3. src 指向的图片属于替换内容，注意，这个替换内容和这个 img 替换元素是壳子与内容的关系， 两者是独立的 。在CSS2.1时代，壳子的实际尺寸（如果没有CSS或HTML设置），则是跟随内容的实际尺寸，因此，网页加载的时候，我们会看到图片占据的高度从0到图片实际高度跳动的过程；如果壳子，也就是 img 有尺寸限制，则替换内容 fill 拉伸适应于 img 替换元素的设定尺寸。总而言之，壳子与内容的尺寸永远是一样的。于是，我们就会误认为图片就是那个图片，唯一的存在，导致我们理解 object-fit 的特性表现出现了障碍。
4. 在CSS3时代， object-fit 的世界里， object-fit 控制的永远是替换内容的尺寸表现，注意，是替换内容的尺寸表现，不是 img 替换元素。或者这么讲吧，我们对 img 设置：

   .box > img { width: 100%; height: 100%; }

   实际上是控制 img 这个元素的，这个壳子的尺寸是100%撑满容器。上面截图的5个示例的图片实际上都是100%拉伸与容器的；之所以实际的图片内容没有拉伸，是因为受 object-fit 控制， object-fit 控制了 src 对应的替换内容的尺寸，或者包含，或者覆盖。

5. 之所以 object-fit:contain 会透明留白，是因为我们没有对壳子 img 设置背景色，假设我们给壳子 img 增加个红色背景，大家就会明白我说的意思了：

   .box > img { width: 100%; height: 100%; background-color: #cd0000; }

   效果如下截图，会发现，原来的透明留白现在是红色背景，说明了什么？说明 img 替换元素和 src 替换内容是两个独立体。 img 替换元素受到了CSS 100% 拉伸控制（所以红色背景充满容器）， src 替换内容也受到了 object-fit 展示控制。大家各司其职，没有什么覆盖，冲突！

   

   您可以狠狠地点击这里： CSS3 object-fit属性值表现Demo

你以为理解了 object-fit 的行为表现就结束了吗？才怪呢！

目前，IE浏览器并不支持 object-fit ：

object-fit 好棒棒，我很喜欢，奴家很想要，怎么办？

有个 Github上有个polyfill , 大家有兴趣可以围观下。

你以为知道了如何兼容处理就结束了吗？没错，结束了，我们看 object-position .

四、object-position理解

object-position 要比 object-fit 单纯的多，就是控制替换内容位置的。默认值是 50% 50% ，也就是居中效果，所以，无论上一节 object-fit 值为那般，图片都是水平垂直居中的。因此，下次要实现尺寸大小不固定图片的垂直居中效果，可以试试 object-fit .

与 background-position 类似， object-position 的值类型为 <position> 类型值。也就是说，CSS3的相对坐标设定样式支持的。

例如替换内容一直定位在容器的右下角：

object-position: 100% 100%;

例如替换元素相对于右下角20px 10px地方定位：

object-position: right 20px bottom 10px;

上面的表现在FireFox 36浏览器下符合预期，Chrome没看明白：

因此，建议还是使用calc实现相对右下角定位：

object-position: calc(100% - 20px) calc(100% - 10px);

此时，Chrome浏览器的表现符合预期了：

同样的， object-position 也支持负值，特征表现与 background-position 一致。

由于比较单纯，就不展开了。若有兴趣，您可以狠狠地点击这里： CSS3 object-position使用示意Demo

五、object-position/object-fit其他应用

CSS真是个很奇怪的东西，发明它的目的可能是为了实现A效果，结果，为了实现A效果所外挂的一些特性往往被用来做其他事情。比方说 float 被大肆用来块状布局，我觉得 object-position/object-fit 也有这种趋势。

上一节提到了水平垂直居中实现，直接一行CSS声明就搞定，简单快捷，以后说不定会热。

还有就是下面要介绍的img sprites实现。

OK, 这里要介绍的img sprites实现不仅只需要一层 <img> 标签，而且没有其他条件限制，比之前的方法都要简单很多。因为从上面诸多示例可以看出， object-fit 天生外挂剪裁功能。

img sprites我唯一想到的应用场景是当图片是动态图片的时候，例如首页的slide广告，大部分情况下 img sprites是没有应用价值的，反而添乱。跟 background sprites相比没有任何优势，至少我是没看出来的。

众人：那你还讲毛线？

应用场景千千万，万一什么时候此方法就跩了一把呢~~

我们不妨看下下面这个任意数字翻转效果：

我们使用的sprites图片是：

我们有如下CSS：

.num {  width: 40px; height: 40px;  object-fit: none;  object-position: 0 0; } .num0 {  } .num1 { object-position: 0 -40px; } .num2 { object-position: 0 -80px; } .num3 { object-position: 0 -120px; } .num4 { object-position: 0 -160px; } .num5 { object-position: 0 -200px; } .num6 { object-position: 0 -240px; } .num7 { object-position: 0 -280px; } .num8 { object-position: 0 -320px; } .num9 { object-position: 0 -360px; } 

于是数字1对应的就是：

<img src="icons-ol.png" class="num num1">

于是数字2对应的就是：

<img src="icons-ol.png" class="num num2">

您可以狠狠地点击这里： object-position/object-fit img sprites与数字翻动demo

demo页面文本框你修改之后，图片数字会跟着变化，例如改成999~

img sprites和background sprites就功能和能耗上而言，基本上是一致的。不过一个img图片，一个是img背景图片。前者兼容性有待提高。所以，目前来看，优势不明显。

六、春来了，春来了~

一开始春来了的时候，自己还是很兴奋的，以为春花秋月来了，但是，现实是春困秋乏。在暖暖的空调房里，硬是在办公椅上打了两个盹，分别在午饭后和晚饭后。

搞到写到现在才开始结尾，这效率……还不如去鱼塘抛两杆子~~

//zxx: 这里省略应该打盹时间吐槽的283个字……

最后，感谢阅读，欢迎交流！

（本篇完）