H5页面布局之图片液态化(自适应)处理简述
寫在前面
我們都知道,頁面的布局分為靜態(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: leetcode703. 数据流中的第K
- 下一篇: [iOS]砸壳