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