在響應式設計(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