CSS3 Object-fit和Object-position

在响应式设计(RWD)中，令你们最头痛的问题的是图片的自适应处理问题。每每我采起的处理方式是给图片的容器设置一个尺寸，而后给图片设置下面的代码：

img { max-width: 100%; height: auto; }

但每每须要处理的只止于此。你可能想要让图像长宽比例来填充他的整个容器，和想从新定位他的中心位置。或者，若是你想按长宽比例响应式调整iframe，你可能会真正的碰到麻烦。固然也有修复的方法，但全部人都在说：

媒体调整的行为将会失控！

是的，如今咱们将要解决这个问题。CSS标准提出属性object-fit和object-position能够解决这样的问题。

Chris Mills在2011年发表了一篇The CSS3 object-fit and object-position properties，文章中详细介绍了object-fit和object-position属性的使用。今天咱们也将深刻学习和了解这两个属性的具体使用。

功能简介

在CSS中，替换元素(replaced elements)，如<img>和<video>元素一直存在长宽比的控制问题，特别在在响应式设计中，如何在不一样设备，不一样分辨率下对这些元素的长宽进行响应。例如，您可能想不以图片的正确尺寸，不想扭曲图像，也不想失去图像的长宽比例，让图片占据必定的空间。按照长宽比例调整和缩略图像的画面比挤压和拉伸图像是一个更优雅的解决方案。

在CSS3中咱们可使用object-fit和object-position来处理。“object-fit”属性指定了替换元素的内容应该如何使用他的宽度和高度来填充其容器。“object-position”属性指定了替换元素在容器中的对齐方式。

语法和取值说明

欲要了解这两个属性的具体使用，咱们先从其语法和属性值做用入手。

object-fit语法

object-fit属性的语法很是的简单：

object-fit:fill | contain | cover | none | scale-down 

object-fit取值说明

object-fit主要适合于替换元素，好比：<video>、<object>、<img>、<input type="image">、<svg>、<svg:image>和<svg:video>等。其默认值为fill。object-fill取值的说明以下：

•  fill:此值为boject-fit的默认值，替换内容的大小被设置为填充元素的内容框，也就是说，元素的内容扩大到彻底填充容器的外形尺寸，即便这打破其内在的宽高比。
•  contain：替换元素内容大小保持长宽比例填充元素内容容器，其具体对象大小被解析为一个包含元素的宽度和高度。也就是说，若是你在替换元素上设置一个明确的高度和宽度，此值将致使内容大小，彻底在固定的比例显示，但仍在元素尺寸内显示。
•  cover：替换元素内容大小保持长宽比例填充元素内容容器，其具体对象大小被解析为覆盖整个元素的宽度和高度。也就是说，替换元素内容大小保持长宽比，但改变宽度和高度，以便彻底覆盖内容元素。
•  none：替换元素内容不调整大小以适应内部元素的容器，内容彻底忽略设置在元素上的任何高度和权重，而且仍在元素尺寸内显示。
•  scale-down：当内容大小设置了non或contain，将致使具体对象变得更小。

来看官网提供的一个效果示意图：

object-position语法

object-position的语法和CSS中的background-position很是的相似：

object-position: <position>

其主要适用于替换元素，如：<video>、<object>、<img>、<input type="image">、<svg>、<svg:image>和<svg:video>等。其默认值为“50% 50%”(center)。

object-position属性决定了它的盒子里面替换元素的对齐方式。其取值和CSS中background-position属性取值同样。以下所示：

img { height: 100px; width: 100px; object-fit: contain; object-position: top 75%; }

浏览器兼容性

object-fit和object-position属性到目前为止，浏览器的兼容并不很好，支持的浏览器仅有Opera12.1(还须要添加其私有前缀-o-)和Opera Mobile11.5~12.1。不过值得庆幸的是Chrome32+将会支持这两个属性。其详细的兼容说明以下所示：

在写本教程的时候，你可使用Google Chrome Canary浏览器来进行测试。（在下文中的用例，使用的是Google Chrome Canary33进行的效果测试）。

object-fit的应用

在任何替换元素上均可以使用object-fit属性。前面主要介绍了object-fit各属性的理论知识，接下来，使用简单的用例来加以说明各属性值的使用与效果。

为了更好的说明效果，咱们这里引入一张简单的图像：

HTML结构

结构很简单，就是一张简单的图片：

<div> <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1312/object-test.jpg" alt="Object-fit Example" /> </div> 

CSS样式

简单的添加一点样式：

div { margin: 20px; text-align: center; } img { width: 300px; height: 300px; border: 1px solid black; background-color: #ccc; }

其默认效果以下所示：

 

fill效果

在原始效果的基础上，咱们先来添加object-fit属性的fill效果：

img { width: 300px; height: 300px; border: 1px solid black; background-color: #ccc; object-fit:fill; }

效果以下：

从效果上看，和默认的效果没有两样。

contain效果

把object-fill值换成contain，以下所示：

img { width: 300px; height: 300px; border: 1px solid black; background-color: #ccc; object-fit:contain; }

其效果以下所示：

当object-fit取值为contain时，效果有明显的变化。按必定的长宽比例进行了图片的缩放。

cover效果

img { width: 300px; height: 300px; border: 1px solid black; background-color: #ccc; object-fit:cover; }

效果以下：

当object-fit取值为cover时，图片以原中心为基点，向外扩展，超出容器大小部分会自动截取。

none效果

img { width: 300px; height: 350px; border: 1px solid black; background-color: #ccc; object-fit:none; }

效果以下：

取值为none时，图像以原点向外扩展。

scale-down效果

img { width: 300px; height: 300px; border: 1px solid black; background-color: #ccc; object-fit:scale-down; }

效果以下：

上在演示了object-fit属性在不一样取值下的效果。为了更好的看出他们以前的变化，咱们经过几个不一样的gif图来动态演示他们其中的不一致之处。

fill动画演示

图片一直会填充整个替换元素，而且图片按必定的比例对画面进行调整。

contain动画演示

图片按必定的比例进行画面的调整，会出现图片水平和垂直方向留白现象。极其相似于background-size属性取什为contain时的效果。

none动画演示

当图片尺寸设置的比原始尺寸小时，图片原点不动，超出部分会自动截取；当图片尺寸设置比原始尺寸大时，四周会留白。

cover动画演示

图片会一直填充，超出部分会自动截取。极其相似于background-size属性中取值为cover的效果。

scale-down的动画演示

有点相似于object-fit取值为contain时效果。

object-position应用

前面说过，object-position相似于background-position,而且取值能够和background-position取值同样。不过object-position主要用于调整替换元素的对齐方式。咱们简单的来看一个示例：

img { width: 300px; height: 300px; border: 1px solid black; background-color: #ccc; object-fit:contain; object-position: 10px 10px; }

效果以下：

为了更好的了解object-position的使用，咱们一样来看一个动画演示效果图：

扩展阅读

•  object-fit
•  object-position
•  The CSS3 object-fit and object-position properties
•  Fix Image Resizing with object-fit
•  Control image aspect ratios with CSS3

如需转载，烦请注明出处：http://www.w3cplus.com/css3/css3-object-fit-and-object-position-properties.html