CSS3 object-fit和object-position

• 其內(nèi)容不受CSS視覺格式化模型控制的元素,比如image,嵌入的文檔(iframe之類)或者applet,叫做替換元素。比：img元素的內(nèi)容通常會被其src屬性指定的圖像替換掉。替換元素通常有其固有的尺寸:一個固有的寬度,一個固有的高度和一個固有的比率。比如一幅位圖有固有用絕對單位指定的寬度和高度,從而也有固有的寬高比率。另一方面,其他文檔也可能沒有固有的尺寸,比如一個空白的html文檔。
• CSS渲染模型不考慮替換元素內(nèi)容的渲染。這些替換元素的展現(xiàn)獨立于CSS。object,video,textarea,input也是替換元素,audio和canvas在某些特定情形下為替換元素。使用CSS的content屬性插入的對象是匿名替換元素。

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

• fill ： 默認(rèn)值。填充，可替換元素填滿整個內(nèi)容區(qū)域，可能會改變長寬比，導(dǎo)致拉伸。
• contain ： 包含，保持原始的尺寸比例，保證可替換元素完整顯示，寬度或高度至少有一個和內(nèi)容區(qū)域的寬度或高度一致，部分內(nèi)容會空白。
• cover ： 覆蓋，保持原始的尺寸比例，保證內(nèi)容區(qū)域被填滿。因此，可替換元素可能會被切掉一部分，從而不能完整展示。
• none ： 保持可替換元素原尺寸和比例。
• scale-down ： 等比縮小。就好像依次設(shè)置了none或contain, 最終呈現(xiàn)的是尺寸比較小的那個。

<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>

object-position: <position>

img{
  object-fit: contain;
  object-position: 0 0;
}

img{
  object-fit: contain;
  object-position: bottom 10px left 10px;
}

img{
  object-fit: contain;
  object-position: calc(100% - 10px) calc(100% - 10px);
}

img{
  object-fit: contain;
  object-position: -10px calc(100% - 10px);
}