H5頁面佈局之圖片液態化（自適應）處理簡述

寫在前面

我們都知道，頁面的佈局分爲靜態佈局和響應式佈局，爲什麼響應式佈局很火呢？因爲在過去我們在處理不用終端之間的頁面佈局問題的時候，都是使用好幾套代碼來實現，舉例子來說，假設我們做一個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聯繫我，或者直接掃我的名片聯繫我，能幫的我盡力幫！共同進步！

謝謝閱讀