原文: http://blog.csdn.net/oulihong123/article/details/54601030css
響應式網站、移動端頁面在DIV CSS佈局中對於圖片列表或圖片排版時,
若是想要圖片按比例縮放,
最簡單的就是把img寬度設爲100%,
不設置高度,高度就會自動跟着高度縮放html
可是若是要達到的效果是,要讓圖片的寬高要按必定的比例顯示,如1:1 、4:3 等,
然而圖片尺寸不是這個比例,又不想讓圖片拉伸變形,自動裁剪掉兩邊多餘部分、這該如何解決呢?css3
首先,今天準備了四張寬高各不相同的素材,以下圖所示: web
先展現一下最終效果:
(注意這裏的裁剪是以中間爲基點,裁剪的是上下或左右兩邊)瀏覽器
(寬高1:1):app
(寬高4:3): 佈局
(寬高3:4): 優化
html部分:網站
<div class="zoomImage" style="background-image:url(images/test1.jpg)"></div>
css部分:url
.zoomImage{ width:100%; height:0; padding-bottom: 100%; overflow:hidden; background-position: center center; background-repeat: no-repeat; -webkit-background-size:cover; -moz-background-size:cover; background-size:cover; }
width:100%; height:0; padding-bottom: 100%; overflow:hidden;
樣式中的上面四句主要目的是爲了讓這個div以1:1的大小呈現,
雖然height:0;高度爲0,可是它的padding值爲100%
這是由於在padding爲百分比的時候,是根據他父層的寬度來進行計算的。
在一點MDN關於padding的文檔 也有說到,有興趣的同窗能夠看看。
background-position: center center; background-repeat: no-repeat; -webkit-background-size:cover; -moz-background-size:cover; background-size:cover;
後面5句就是利用了css3中的 background-size:cover 的特性,把背景圖像擴展至足夠大,以使背景圖像徹底覆蓋背景區域。
對於padding爲百分比的時候,我畫了一張圖,但願有助於你們理解:
總結:就是你所須要的比例,就是width與padding-bottom的比例
用的時候,直接把.zoomImage當成img標籤來用就能夠了。
在這裏我拿swiper輪播圖插件舉例:
這個插件是目前應用較普遍的移動端網頁觸摸內容滑動js插件,balabala…
這個插件原本就是響應式的沒錯,
但有兩個問題:
一、這個輪播圖你必需要給他一個高度,但高度不是固定死的,是須要按比例的,
(除了用js,或者每一個分辨率用媒體查詢設置一下高度/這個簡直不要太繁瑣)
因此咱們還能夠用剛剛上面的padding方法,讓它成爲一個能夠按比例縮放的容器
二、輪播圖裏的圖片不是須要的比例怎麼辦(又回到這個問題上來了,如今知道該怎麼作了吧)
優化前:
優化後:
就能夠變成一個:不用根據圖片尺寸,均可以根據比例自適應的輪播圖啦。
這個樣式裏有利用到CSS3的屬性: background-size:cover;
那當咱們作響應式、移動端的頁面時,確定也要用到CSS3的媒體查詢或者其餘的CSS3樣式,並且移動端的瀏覽器對CSS3的支持性比較好,因此這一點應該是不用擔憂的。