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相反，其會正好覆蓋整個背景相對區域，可是背景圖片的某些部分就看不見。

來源： http://www.cnblogs.com/freefish12/p/5776747.html

來自爲知筆記(Wiz)