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: 此值为object-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的利用，我们同样来看一个动画演示效果图：
