聊聊 CSS3 中的 object-fit 和 object-position

（點擊上方公眾號，可快速關注）

作者：伯樂在線專欄作者 - TGCode

點擊 → 了解如何加入專欄作者

如需轉載，發送「轉載」二字查看說明

最近一直忙於將JavaScript學習的筆記整理成電子書，也沒什麼空閒時間寫新的文章。趁著今天有點空閒，決定再來折騰一下CSS3中的兩個屬性：object-fit和object-position。

這兩個奇葩的屬性是做什麼的呢？其實它們是為了處理替換元素（replaced elements）的自適應問題，簡單的說，就是處理替換元素的變形（這裡指長寬比例變形）問題。

等等，好像多了一個名詞，啥叫替換元素？替換元素其實是：

其內容不受CSS視覺格式化模型控制的元素,比如image,嵌入的文檔(iframe之類)或者applet,叫做替換元素。比：img元素的內容通常會被其src屬性指定的圖像替換掉。替換元素通常有其固有的尺寸:一個固有的寬度,一個固有的高度和一個固有的比率。比如一幅位圖有固有用絕對單位指定的寬度和高度,從而也有固有的寬高比率。另一方面,其他文檔也可能沒有固有的尺寸,比如一個空白的html文檔。

CSS渲染模型不考慮替換元素內容的渲染。這些替換元素的展現獨立於CSS。object,video,textarea,input也是替換元素,audio和canvas在某些特定情形下為替換元素。使用CSS的content屬性插入的對象是匿名替換元素。

這個當然不是我頭腦風暴來的，而是引用別人的解釋：引用（http://openwares.net/internet/css_replaced_element.html）

常見的替換元素有<video>、<object>、<img>、<input type=」image」>、<svg>、<svg:image>和<svg:video>等。

要是看的稀裡糊塗的也沒關係，接著往下看，我相信你會懂得！

1、object-fit

語法：

object-fit: fill | contian | cover | none | scale-down;

fill ： 默認值。填充，可替換元素填滿整個內容區域，可能會改變長寬比，導致拉伸。

contain ： 包含，保持原始的尺寸比例，保證可替換元素完整顯示，寬度或高度至少有一個和內容區域的寬度或高度一致，部分內容會空白。

cover ： 覆蓋，保持原始的尺寸比例，保證內容區域被填滿。因此，可替換元素可能會被切掉一部分，從而不能完整展示。

none ： 保持可替換元素原尺寸和比例。

scale-down ： 等比縮小。就好像依次設置了none或contain, 最終呈現的是尺寸比較小的那個。

不好意思，我又要擺妹子來誘惑你們了，看效果圖：

上面的五個例子的代碼：

<style>

.box{  

  position:relative;  

  float:left;  

  margin:0 10px 40px 10px;  

  width:150px;  

  height:150px;  

}  

.box>img{  

  width:100%;  

  height:100%;  

  background-color:#000;  

}  

.fill{  

  object-fit:fill;  

}  

.contain{  

  object-fit:contain;  

}  

.cover{    

  object-fit:cover;  

}  

.none{  

  object-fit:none;  

}  

.scale{  

  object-fit:scale-down;  

}  

</style>

 

<div class="box">  

  <img src="example-girl.jpg" class="fill" alt="">  

</div>  

<div class="box">  

  <img src="example-girl.jpg" class="contain" alt="">

</div>  

<div class="box">  

  <img src="example-girl.jpg" class="cover" alt="">

</div>  

<div class="box">  

  <img src="example-girl.jpg" class="none" alt="">

</div>  

<div class="box">  

  <img src="example-girl.jpg" class="scale" alt="">

</div>

看到這些效果，我想同志們最關心的的應該是兼容性，點這裡點這裡（http://caniuse.com/#search=object-fit）

2、object-position

object-position屬性決定了它的盒子裡面替換元素的對齊方式。

語法：

object-position: <position>

默認值是50% 50%，也就是居中效果，其取值和CSS中background-position屬性取值一樣。（如果不熟悉background-position，可以瞄瞄這裡《CSS3 Background》（http://ghmagical.com/article/page/id/Lg7blxcyTOUU））

例如：替換元素位於內容區域的左上角

img{

  object-fit: contain;

  object-position: 0 0;

}

效果圖：

例如：替換元素相對於左下角10px 10px地方定位

img{

  object-fit: contain;

  object-position: bottom 10px left 10px;

}

效果圖：

當然，你也可以使用calc()來定位：

img{

  object-fit: contain;

  object-position: calc(100% - 10px) calc(100% - 10px);

}

效果圖：

它還支持負數：

img{

  object-fit: contain;

  object-position: -10px calc(100% - 10px);

}

效果圖：

總之，object-position的特性表現與backgound-position一樣一樣的。

兼容性：點這裡（http://caniuse.com/#search=object-position）

到這裡，這兩個屬性算是講完了，就是這麼簡單。

關注「前端大全」

看更多精選前端技術文章

↓↓↓

專欄作者簡介 （ 點擊 → 加入專欄作者 ）

TGCode：路途雖遠，無所畏。

打賞支持作者寫出更多好文章，謝謝！