详解CSS3 object-position/object-fit属性实例

object-position和object-fit

要了解属性名上的这个的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中，“替换元素”指的是(引用自这里)：

其内容不受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 { 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%; }

你有没有这样的疑惑?有木有!!

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

img是个元素，且是个替换元素，这个通过上面的学习应该都知道;

一个图片，如果没有src，它依然是个替换元素，它在浏览器中的解析依然是正确的;

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

在CSS3时代，object-fit的世界里，object-fit控制的永远是替换内容的尺寸表现，注意，是替换内容的尺寸表现，不是img替换元素。或者这么讲吧，我们对img设置：

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

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

之所以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的值类型为类型值。也就是说，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实现。

要实现img sprites，方法很多：

1. 外部尺寸容器overflow:hidden限制，里面或position或margin定位。但这种方法需要2层标签，麻烦。
2. 其实，很早时候，我就尝试过使用clip实现img sprites效果，可以1层标签就搞定。但是，元素必须position:absolute. 麻烦。

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

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

众人：那你还讲毛线?

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

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

我们使用的sprites图片是：

我们有如下CSS：

.num {

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; }

于是数字2对应的就是：

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

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