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