background-size： contain 與cover的區別，以及ie78的兼容寫法

一：background-size： contain 與cover的區別：

作用： 都是將圖片以**相同寬高比**縮放以適應整個容器的寬高。

不同之處在於：
1.  在no-repeat情況下，如果容器寬高比與圖片寬高比不同，

　　cover：圖片寬高比不變、鋪滿整個容器的寬高，而圖片多出的部分則會被截掉；

　　contain:圖片自身的寬高比不變，縮放至圖片自身能完全顯示出來，所以容器會有留白區域；

PS:其實，從英文的意思來說：cover意味着“遮罩、遮蓋”---此處理解為“塞滿”較恰當，contain意為“包含”--也就是：我圖片雖然縮放了，但是整個圖是被“包含”在你里面的，你必須把我顯示完整、不能裁剪我一絲一毫~

2.  在repeat情況下：cover:與上述相同；contain:容器內至少有一張完整的圖，容器留白區域則平鋪背景圖，鋪不下的再裁掉。

-------------------

例子：

先上原圖：寬高600*1069

 

代碼：

    <div class="img-block"></div>

 

css代碼之no-repeat:cover版：

.img-block{
            width: 200px;
            height: 200px;
            border:2px solid black;
            background:url(../img/justice.jpg) no-repeat;
            background-size:cover;
        }

效果圖:

看的出來：cover的效果是：圖片同比縮放、塞滿整個容器，而圖片多余的部分則被剪掉了；

 

css代碼之no-repeat:contain版：

.img-block{
            width: 200px;
            height: 200px;
            border:2px solid black;
            background:url(../img/justice.jpg) no-repeat;
            background-size:contain;
        }

效果圖：

看得出來：contain版：圖片同比縮放至圖片能完全顯示在容器中，故容器有留白。so,這就涉及到俺最開始說的background-repeat了。

如果情況變成background-repeat:repeat,（其他代碼不變）那么此處的留白區域會再平鋪一張背景圖，而且肯定是鋪不滿一張的，那么這第二張背景圖才會被截斷；效果入下：

然后我估計看文的某些懶人會懶得去翻上面的CSS代碼，所以這里我就寫一遍吧~

background-repeat:repeat情況之background-size:contain版

        .img-block{
            width: 200px;
            height: 200px;
            border:2px solid black;
            background:url(../img/justice.jpg);
            background-size:contain;
        }

 

二：background-size 在ie7\8的兼容寫法：用filter濾鏡

至於ie6?我至今不知道ie6咋個整。如果你知道，請務必告訴我~

 

css中加入一句：

 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/justice.jpg',sizingMethod='scale');

參數解釋：

src="圖片路徑"，可以是相對，也可以是絕對；

sizingMethod：“scale|crop|image” 可選項。字符串(String)。設置或檢索濾鏡作用的對象的圖片在對象容器邊界內的顯示方式。

　　 crop：剪切圖片以適應對象尺寸。 
　　image：默認值。增大或減小對象的尺寸邊界以適應圖片的尺寸。 
　　scale：縮放圖片以適應對象的尺寸邊界。

 

 

PS:注意：如果設置了background-attachment:fixed;會是background-size屬性失效