寫在前面

我們都知道，頁面的布局分為靜態布局和響應式布局，為什么響應式布局很火呢？因為在過去我們在處理不用終端之間的頁面布局問題的時候，都是使用好幾套代碼來實現，舉例子來說，假設我們做一個app或者web應用，那么我們必須要面對的一個問題是用戶使用什么終端訪問？如果是PC，我們需要用960PX-1204PX的布局方式來寫，那么如果用戶使用ipad呢？768-1024px，使用手機呢？再分的細一點，如果用戶使用的是ipadmini還是pro還是air呢？當這些問題通通出現的時候，我們會發現，我們之前解決問題的辦法已經達不到現實的要求了，怎么辦呢？響應式的布局就出現了！那么我們今天其實不是要講怎么實現響應式的布局，等到我總結完畢的時候，我會寫一個詳細的教程出來，今天我們簡單的講一下響應式布局中的圖片處理問題。

示意圖

我們拿一張比較大的圖片和一張比較小的圖片來做例子，首先是一張比較大的圖片，我用我公司地址的一張俯瞰圖（我在杭州濱江，喜歡交朋友，距離近的可以找我玩，我請客，哈哈！）：

再用一張比較小的圖片：

我先說一下我們平常怎么處理的

我們一般寫一個div或者是別的元素，準備將一張圖片作為背景圖的時候，我們會這樣寫：

css源碼：

.test1{height: 40rem;width: 30rem;background-image: url(img/slide3.png);}

H5源碼：

<div class="test1"></div>

對吧，這是最普遍的一種做法， 不做任何的處理，效果是怎么樣的呢？????

圖片變形，當然還有很多的時候圖片會出現失真的情況，所以基于這些問題，我們怎么簡單的處理一下：

首先我們簡單的做幾個例子：實現一個這樣的效果：

手機端實現這樣的效果：

ok，實現這樣的其實就是基本可以滿足我們的需求，可以根據自己的定義的大小來鋪滿同時圖片不變形，我們看源碼：

css源碼：

div img{max-width: 100%;height: auto;}

H5源碼：

<div id="" style="width: 5rem;height: 100%;"><img src="img/slide3.png" ></div><div id="" style="width: 20rem;height: 100%;"><img src="img/slide3.png" ></div><div id="" style="width: 35rem;height: 100%;"><img src="img/slide3.png" ></div><div id="" style="width: 40rem;height: 40rem;"><img src="img/slide3.png" ></div>

有人看過源碼會說了，這不是耍人嗎？其實不是的，最簡單的適應就是這樣的，這也是最簡單的一種處理辦法，有人說了，有的時候我們需要的是將一個logo鋪滿是不是也是可以的，logo的處理可以這樣：

假設這是一個logo：

那么實現這種效果其實也很簡單：

css源碼：

.logo{ display:block;width:100%;height:40px;text-indent:55rem;background-image: url(img/slide3.png);background-repeat:no-repeat;background-size:100% 100%;}

H5源碼

<div class="logo" style="width: 7rem;"></div>

這里簡單的解釋一下：

background-size是css3的新屬性，用于設置背景圖片的大小，有兩個可選值，第一個值用于指定背景圖的width,第2個值用于指定背景圖的height,如果只指定一個值，那么另一個值默認為auto。 background-size:cover; 等比擴展圖片來填滿元素 background-size:contain; 等比縮小圖片來適應元素的尺寸

注意事項

下面講一下用的時候需要注意的幾個地方：

第一：

如果您的代碼是這樣的：

<div id="" style="width: 5rem;height: 4rem;"><img src="img/slide3.png" ></div><div id="" style="width: 20rem;height: 15rem;"><img src="img/slide3.png" ></div><div id="" style="width: 35rem;height: 20rem;"><img src="img/slide3.png" ></div><div id="" style="width: 40rem;height: 40rem;"><img src="img/slide3.png" ></div>

效果會是這樣：

可以看出來和之前的區別是中間的空間變得很大，這是為什么呢？因為我們使用具體的數值+rem的時候，他會將布局的空間展示為那么大，那么我們的style里面已經設置好的是height為auto，什么意思呢？就是css為什么保證圖片不會變形，還要不失真，只能將圖片等比縮放，那么等比縮放的時候就意味著有一些地方是不會出現圖片的，所以只能是空白來填充！那么怎么解決這樣的問題呢？我們可以不設置高度，或者設置的時候將高度用百分比表示就行了！

第二：

我們使用比較小的圖片的時候，我們設置一個比較大的寬度的時候，圖片是沒辦法完全填充的，舉個例子：

<div id="" style="width: 5rem;height: 100%;"><img src="img/slide1.jpg" ></div><div id="" style="width: 20rem;height: 100%;"><img src="img/slide1.jpg" ></div><div id="" style="width: 35rem;height: 100%;"><img src="img/slide1.jpg" ></div><div id="" style="width: 70rem;height: 40rem;"><img src="img/slide1.jpg" ></div>

效果：

這是之前的比較小的圖片，認真的可以發現我們最后一張是和之前的一張的寬度一樣的，那么其實我們設置的時候不是的，我們寫的是70rem的寬度，為什么會出現這樣的情況呢？是因為我們在設置一個比原圖寬度還要寬的數值的時候，圖片會出現失真的情況，為了避免這樣的情況出現，所以他會顯示原圖的大小，而不會變化的很大！

最后關于rem的使用我們可以看一下這個人的博客：

怎么使用rem

關于不同終端的尺寸問題，可以查看這個網址：

不同終端屏幕尺寸展示

ok，今天寫的比較倉促，寫的可能有一些不是很清晰，有什么不明白的可以直接博主簡介那里QQ聯系我，或者直接掃我的名片聯系我，能幫的我盡力幫！共同進步！

?謝謝閱讀

我的名片：

總結

以上是生活随笔為你收集整理的H5页面布局之图片液态化（自适应）处理简述的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。