css之background的cover和contain的縮放背景圖

 ​

對于這兩個屬性，官網是這樣解釋的：

contain	此時會保持圖像的縱橫比并将圖像縮放成将适合背景定位區域的最大大小。 等比例縮放圖象到垂直或者水準其中一項填滿區域。
cover	此時會保持圖像的縱橫比并将圖像縮放成将完全覆寫背景定位區域的最小大小。 等比例縮放圖象到垂直和水準兩項均填滿區域。

讀了還是不懂，那麼看下面的例子：

​

​contain​

​，按比例調整背景圖檔，使得其圖檔寬高比自适應整個元素的背景區域的寬高比，是以假如指定的圖檔尺寸過大，而背景區域的整體寬高不能恰好包含背景圖檔的話，那麼其背景某些區域可能會有空白。看以下代碼

.im-com{
    width:200px;
    height:50px;    
    background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*圖檔的寬高為440*440，而元素相對區域高度為50*/ 
    background-size:contain;
}
.im-com-1{
    width:50px;
    height:100px;   
    background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*元素相對區域寬度為50*/ 
    background-size:contain;
}      

當圖檔恰好自适應鋪滿元素的寬度或者高度，那麼元素的會有空白處存在，也就是圖中紅色框框都顯示了空白。

3 . ​

​cover​

​，按比例調整背景圖檔，這個屬性值跟​

​contain​

​正好相反，背景圖檔會按照比如自适應鋪滿整個背景區域。假如背景區域不足以包含背景圖檔的話，那麼背景圖檔就會被咔嚓。

.im-com{
    width:200px;
    height:50px;    
    background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*圖檔的寬高為440*440，而元素相對區域高度為50*/ 
    background-size:cover;
}
.im-com-1{
    width:50px;
    height:100px;   
    background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*元素相對區域寬度為50*/ 
    background-size:cover;
}      

當使用了 ​

​cover​

​ 這個值的時候，那麼正好就跟​

​contain​

​相反，其會正好覆寫整個背景相對區域，但是背景圖檔的某些部分就看不見。