background-size的基本屬性

background-size: 可以設(shè)定背景圖像的尺寸，該屬性是css3中的，在移動(dòng)端使用的地方很多，比如最常見(jiàn)的地方在做響應(yīng)性布局的時(shí)候，比如之前做的項(xiàng)目中有輪播圖片，為了自適應(yīng)不同大小分辨率的圖片，我門(mén)需要使用css3中的媒體查詢來(lái)針對(duì)不同的分辨率設(shè)置寬度和高度，雖然這種方式是可以解決問(wèn)題，但是解決方式并不是太好，并且很繁瑣，當(dāng)然我門(mén)也想過(guò)直接使用百分比設(shè)置圖片的大小，比如width(寬度): 100%，height(高度)：100%; 但是設(shè)置圖片等高度100%的時(shí)候并不生效，圖片沒(méi)有顯示出來(lái)，因?yàn)闆](méi)有設(shè)置具體的高度值，瀏覽器渲染的時(shí)候并沒(méi)有高度，因此當(dāng)時(shí)解決的方法是使用css3中的媒體查詢真對(duì)不同的分辨率等比例縮放不同的height(高度)。

瀏覽器支持的程度：IE9+, Firefox4+, opera, chrome, safari5+;

基本語(yǔ)法：background-size: length | percentage | cover | contain;

一：length

該屬性值是設(shè)置背景圖像的寬度和高度的，第一個(gè)值是寬度，第二個(gè)值是設(shè)置高度的。如果只設(shè)置第一個(gè)值，那么第二個(gè)值會(huì)自動(dòng)轉(zhuǎn)換為 “auto”;

二：percentage

該屬性是以父元素的百分比來(lái)設(shè)置圖片的寬度和高度的，第一個(gè)值是寬度，第二個(gè)值是高度。如果只設(shè)置一個(gè)值，那么第二個(gè)值會(huì)被設(shè)置為 “auto”;

三：cover

把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。

四：contain

把圖像擴(kuò)展至最大尺寸，以使寬度和高度 完全適應(yīng)內(nèi)容區(qū)域。

設(shè)置固定寬度400px和高度200px后的圖片

1 

1 .bsize1 {
2 width:400px;
3 height:200px;
4 background: url("1.jpg") no-repeat;
5 border:1px solid red;
6 overflow: hidden;
7 }

固定寬度400px和高度200px－使用background－size:400px 200px縮放設(shè)置或者使用background-size:100% 100%縮放設(shè)置

1 

1 .bsize3 {
2 background-size: 400px;
3 /*background-size:100% 100%;*/
4 } 

固定寬度400px和高度200px－使用background-size:100%的縮放設(shè)置

1 

1 .bsize5 {
2 background-size: 100%;
3 }

使用屬性cover來(lái)設(shè)置背景圖片

1 

.cover {
 background-size:cover;
 }

使用屬性contain來(lái)設(shè)置背景圖片

.contain {
 background-size:contain;
 }

給圖片設(shè)置width屬性100%；高度自適應(yīng)

不使用背景圖片等情況下，給圖片設(shè)置屬性 width ＝ 100%，它的高度會(huì)自適應(yīng)的。如下HTML代碼：

使用另一種方式來(lái)解決圖片自適應(yīng)的問(wèn)題－－圖片自適應(yīng)問(wèn)題

圖片寬度設(shè)置100%，頁(yè)面加載時(shí)會(huì)存在高度塌陷的問(wèn)題，可以使用padding－top來(lái)設(shè)置百分比值來(lái)實(shí)現(xiàn)自適應(yīng) padding-top = (圖片的高度/圖片的寬度)*100；

可以使用padding－top來(lái)設(shè)置百分比值來(lái)實(shí)現(xiàn)自適應(yīng) padding-top = (圖片的高度/圖片的寬度)*100

 

.cover-paddingTop {
 position: relative;
 padding-top: 50%; 
 overflow: hidden;
 }
 .cover-paddingTop img{
 width:100%;
 position: absolute;
 top:0;
 }

使用padding-top:(percentage)實(shí)現(xiàn)響應(yīng)式背景圖片

實(shí)現(xiàn)的基本原理：將使用到保持元素的寬高比的技巧，為元素添加垂直方向的padding-top的值，使用百分比的形式，這個(gè)值是相對(duì)于元素的寬而定的，比如我上面的一張圖片的寬度是1024px，高度為316px；那么現(xiàn)在的

padding-top = （高度 / 寬度 ）*100% ＝ （316 ／ 1024）* 100% ＝ 30.85%;

但是僅僅對(duì)圖片高度和寬度縮放的放還不夠，我門(mén)還必須添加 background-size:cover, 使這個(gè)屬性讓背景鋪滿元素的，但是IE8及以下不支持該屬性，因此為了兼容IE下面的瀏覽器，我門(mén)還需要再加一個(gè)屬性 background-position: center ; 同時(shí)我門(mén)也要保證 圖片的寬度最大等于父容器的寬度；因此下面的HTML代碼如下：

.column{
 max-width: 1024px;
 }
 .figure {
 padding-top:30.85%; /* 316 / 1024 */
 background: url("6.jpg") no-repeat;
 background-size:cover;
 background-position:center;
 }

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com