理解CSS3中的background－size(對響應性圖片等比例縮放)

 

2016-03-10 01:40 by 空智, 7463 閱讀, 8 評論, 收藏, 編輯

理解CSS3中的background－size(對響應性圖片等比例縮放)

閱讀目錄

• background-size的基本屬性
• 給圖片設置固定的寬度和高度的
• 固定寬度400px和高度200px－使用background－size:400px 200px縮放設置
• 固定寬度400px和高度200px－使用background-size:400px;的縮放設置，那麼第二個參數會自動轉換爲auto
• 固定寬度400px和高度200px－使用background-size:100% 100%的縮放設置
• 固定寬度400px和高度200px－使用background-size:100%的縮放設置
• 使用屬性cover來設置背景圖片
• 使用屬性contain來設置背景圖片
• 給圖片設置width屬性100%；高度自適應
• 使用另外一種方式來解決圖片自適應的問題－－圖片自適應問題
• 使用padding-top:(percentage)實現響應式背景圖片

回到頂部

background-size的基本屬性

     background-size: 能夠設定背景圖像的尺寸，該屬性是css3中的，在移動端使用的地方不少，好比最多見的地方在作響應性佈局的時候，好比以前作的項目中有輪播圖片，爲了自適應不一樣大小分辨率的圖片，我門須要使用css3中的媒體查詢來針對不一樣的分辨率設置寬度和高度，雖然這種方式是能夠解決問題，可是解決方式並非太好，而且很繁瑣，固然我門也想過直接使用百分比設置圖片的大小，好比width(寬度): 100%，height(高度)：100%; 可是設置圖片等高度100%的時候並不生效，圖片沒有顯示出來，由於沒有設置具體的高度值，瀏覽器渲染的時候並無高度，所以當時解決的方法是使用css3中的媒體查詢真對不一樣的分辨率等比例縮放不一樣的height(高度)；今天我門從新來學習下background-size 這個具體的屬性值，而且使用新的方法來解決針對響應性佈局的背景圖片自適應。

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

基本語法：background-size: length | percentage | cover | contain; 

一：length

    該屬性值是設置背景圖像的寬度和高度的，第一個值是寬度，第二個值是設置高度的。若是隻設置第一個值，那麼第二個值會自動轉換爲 「auto」;

二：percentage

     該屬性是以父元素的百分比來設置圖片的寬度和高度的，第一個值是寬度，第二個值是高度。若是隻設置一個值，那麼第二個值會被設置爲 「auto」;

三：cover

      把背景圖像擴展至足夠大，以使背景圖像徹底覆蓋背景區域。

四：contain

      把圖像擴展至最大尺寸，以使寬度和高度 徹底適應內容區域。 

回到頂部

給圖片設置固定的寬度和高度的

下面我門來作一些demo來實現下上面的幾個屬性值的基本使用方法；

基本的原圖的html代碼以下：

<h3>原圖</h3> <div class="images"><img src="http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg" width="100%"/></div>

效果以下圖所示：

 

給圖片設置固定的寬度和高度的代碼以下：

好比設置 固定寬度400px和高度200px後的圖片；

HTML代碼以下：

<h3>固定寬度400px和高度200px後的圖片</h3> <div class="bsize1"></div>

css代碼以下：

.bsize1 { width:400px; height:200px; background: url("http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg") no-repeat; border:1px solid red; overflow: hidden; }

效果以下：

回到頂部

固定寬度400px和高度200px－使用background－size:400px 200px縮放設置

2. 固定寬度400px和高度200px－使用background－size:400px 200px縮放設置；

HTML代碼以下：

<h3>固定寬度400px和高度200px－使用background－size:400px 200px縮放設置</h3> <div class="bsize1 bsize2"></div>

css代碼以下：

.bsize2 { background-size: 400px 200px; }

效果以下：

回到頂部

固定寬度400px和高度200px－使用background-size:400px;的縮放設置

 3. 固定寬度400px和高度200px－使用background-size:400px;的縮放設置，那麼第二個參數會自動轉換爲auto；

HTML代碼以下：

<h3>固定寬度400px和高度200px－使用background-size:400px;的縮放設置</h3> <div class="bsize1 bsize3"></div>

css代碼以下：

.bsize3 { background-size: 400px; }

效果以下：

回到頂部

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

4. 固定寬度400px和高度200px－使用background-size:100% 100%的縮放設置

HTML代碼以下：

<h3>固定寬度400px和高度200px－使用background-size:100% 100%的縮放設置</h3> <div class="bsize1 bsize4"></div>

css代碼以下：

.bsize4 { background-size:100% 100%; }

效果以下：

回到頂部

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

5. 固定寬度400px和高度200px－使用background-size:100%的縮放設置。

HTML代碼以下：

<h3>固定寬度400px和高度200px－使用background-size:100%的縮放設置</h3> <div class="bsize1 bsize5"></div>

css代碼以下：

.bsize5 { background-size: 100%; }

以下所示：

回到頂部

使用屬性cover來設置背景圖片

6. 使用屬性cover來設置背景圖片。

HTML代碼以下：

<h3>使用屬性cover來設置背景圖片</h3> <div class="bsize1 cover"></div>

css代碼以下：

.cover { background-size:cover; }

效果以下：

回到頂部

使用屬性contain來設置背景圖片

7. 使用屬性contain來設置背景圖片。

HTML代碼以下：

<h3>使用屬性contain來設置背景圖片</h3> <div class="bsize1 contain"></div>

css代碼以下：

.contain { background-size:contain; }

效果以下：

回到頂部

給圖片設置width屬性100%；高度自適應

8.  下面我門使用圖片來作，不使用背景圖片等狀況下，給圖片設置屬性 width ＝ 100%的話，它的高度會自適應的。以下HTML代碼：

<h3>給圖片設置屬性寬度爲100%的狀況下，可自適應圖片</h3> <div class="bsize-padding"><img src="http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg" width="100%"/></div>

效果以下：

回到頂部

使用另外一種方式來解決圖片自適應的問題－－圖片自適應問題

9. 使用另外一種方式來解決圖片自適應的問題－－圖片自適應問題，圖片寬度設置100%，頁面加載時會存在高度塌陷的問題，可使用padding－top來設置百分比值來實現自適應 padding-top = (圖片的高度/圖片的寬度)*100；

以下HTML代碼：

<h3>圖片自適應問題，圖片寬度設置100%，頁面加載時會存在高度塌陷的問題</h3> <p>可使用padding－top來設置百分比值來實現自適應 padding-top = (圖片的高度/圖片的寬度)*100</p> <div class="cover-paddingTop"> <img src="http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg"/> </div>

css代碼以下：

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

效果以下：

回到頂部

使用padding-top:(percentage)實現響應式背景圖片

10. 使用padding-top:(percentage)實現響應式背景圖片

      我門都知道，處理在響應性佈局的時候，背景圖片都是等比例縮放，好比上面的使用圖片的狀況，使用<img /> 引入的圖片的話，那麼設置她們的width屬性爲100%；<img src=」」 width=」100%」/> 的話，高度就會等比例縮放，這是圖片，可是若是是背景圖片呢？我門以前的項目中的常見的作法是根據css3媒體查詢的方法來作的，根據不一樣手機的分辨率等不一樣，來等比例縮放背景圖的高度，雖然這種方式是能夠解決問題的，可是這種經過人肉的方式來進行設置並很差，也很繁瑣，今天我門來學習使用padding－top這麼一個屬性來設置了；

實現的基本原理：將使用到保持元素的寬高比的技巧，爲元素添加垂直方向的padding-top的值，使用百分比的形式，這個值是相對於元素的寬而定的，好比我上面的一張圖片的寬度是1024px，高度爲316px；那麼如今的

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

可是僅僅對圖片高度和寬度縮放的放還不夠，我門還必須添加 background-size:cover, 使這個屬性讓背景鋪滿元素的，可是IE8及如下不支持該屬性，所以爲了兼容IE下面的瀏覽器，我門還須要再加一個屬性 background-position: center ; 同時我門也要保證 圖片的寬度最大等於父容器的寬度；所以下面的HTML代碼以下：

<h3>使用padding-top實現響應性圖片(圖片的寬度是1024px，高度是316px)</h3> <div class="column"> <div class="figure"></div> </div>

css代碼以下：

.column{ max-width: 1024px; } .figure { padding-top:30.85%; /* 316 / 1024 */ background: url("http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg") no-repeat; background-size:cover; background-position:center; }

效果以下：

注意：具體的效果能夠本身複製代碼到瀏覽器運行下便可～

轉載自：：http://www.cnblogs.com/tugenhua0707/