寫在前面

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

示意圖

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

再用一張比較小的圖片：

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

我們一般寫一個(gè)div或者是別的元素，準(zhǔn)備將一張圖片作為背景圖的時(shí)候，我們會這樣寫：

css源碼：

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

H5源碼：

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

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

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

首先我們簡單的做幾個(gè)例子：實(shí)現(xiàn)一個(gè)這樣的效果：

手機(jī)端實(shí)現(xiàn)這樣的效果：

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

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>

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

假設(shè)這是一個(gè)logo：

那么實(shí)現(xiàn)這種效果其實(shí)也很簡單：

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的新屬性，用于設(shè)置背景圖片的大小，有兩個(gè)可選值，第一個(gè)值用于指定背景圖的width,第2個(gè)值用于指定背景圖的height,如果只指定一個(gè)值，那么另一個(gè)值默認(rèn)為auto。 background-size:cover; 等比擴(kuò)展圖片來填滿元素 background-size:contain; 等比縮小圖片來適應(yīng)元素的尺寸

注意事項(xiàng)

下面講一下用的時(shí)候需要注意的幾個(gè)地方：

第一：

如果您的代碼是這樣的：

<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>

效果會是這樣：

可以看出來和之前的區(qū)別是中間的空間變得很大，這是為什么呢？因?yàn)槲覀兪褂镁唧w的數(shù)值+rem的時(shí)候，他會將布局的空間展示為那么大，那么我們的style里面已經(jīng)設(shè)置好的是height為auto，什么意思呢？就是css為什么保證圖片不會變形，還要不失真，只能將圖片等比縮放，那么等比縮放的時(shí)候就意味著有一些地方是不會出現(xiàn)圖片的，所以只能是空白來填充！那么怎么解決這樣的問題呢？我們可以不設(shè)置高度，或者設(shè)置的時(shí)候?qū)⒏叨扔冒俜直缺硎揪托辛?#xff01;

第二：

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

<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>

效果：

這是之前的比較小的圖片，認(rèn)真的可以發(fā)現(xiàn)我們最后一張是和之前的一張的寬度一樣的，那么其實(shí)我們設(shè)置的時(shí)候不是的，我們寫的是70rem的寬度，為什么會出現(xiàn)這樣的情況呢？是因?yàn)槲覀冊谠O(shè)置一個(gè)比原圖寬度還要寬的數(shù)值的時(shí)候，圖片會出現(xiàn)失真的情況，為了避免這樣的情況出現(xiàn)，所以他會顯示原圖的大小，而不會變化的很大！

最后關(guān)于rem的使用我們可以看一下這個(gè)人的博客：

怎么使用rem

關(guān)于不同終端的尺寸問題，可以查看這個(gè)網(wǎng)址：

不同終端屏幕尺寸展示

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

?謝謝閱讀

我的名片：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。