【轉載】如何讓圖片按比例響應式縮放、並自動裁剪的css技巧

原文： http://blog.csdn.net/oulihong123/article/details/54601030

 

響應式網站、移動端頁面在DIV CSS佈局中對於圖片列表或圖片排版時， 
若是想要圖片按比例縮放， 
最簡單的就是把img寬度設爲100%， 
不設置高度，高度就會自動跟着高度縮放

可是若是要達到的效果是，要讓圖片的寬高要按必定的比例顯示，如1：1 、4：3 等， 
然而圖片尺寸不是這個比例，又不想讓圖片拉伸變形，自動裁剪掉兩邊多餘部分、這該如何解決呢？

---

首先，今天準備了四張寬高各不相同的素材，以下圖所示： 

---

先展現一下最終效果： 
（注意這裏的裁剪是以中間爲基點，裁剪的是上下或左右兩邊）

（寬高1:1）：

（寬高4:3）： 

（寬高3:4）： 

---

實現樣式

html部分：

<div class="zoomImage" style="background-image:url(images/test1.jpg)"></div>

• 1

css部分：

.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; }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

---

原理剖析

width:100%; height:0; padding-bottom: 100%; overflow:hidden;

• 1
• 2
• 3
• 4

樣式中的上面四句主要目的是爲了讓這個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;

• 1
• 2
• 3
• 4
• 5

後面5句就是利用了css3中的 background-size:cover 的特性，把背景圖像擴展至足夠大，以使背景圖像徹底覆蓋背景區域。

---

對於padding爲百分比的時候，我畫了一張圖，但願有助於你們理解： 

總結：就是你所須要的比例，就是width與padding-bottom的比例 
用的時候，直接把.zoomImage當成img標籤來用就能夠了。

---

關於擴展到響應式輪播：

在這裏我拿swiper輪播圖插件舉例： 
這個插件是目前應用較普遍的移動端網頁觸摸內容滑動js插件，balabala…

這個插件原本就是響應式的沒錯， 
但有兩個問題： 
一、這個輪播圖你必需要給他一個高度，但高度不是固定死的，是須要按比例的， 
（除了用js，或者每一個分辨率用媒體查詢設置一下高度/這個簡直不要太繁瑣） 
因此咱們還能夠用剛剛上面的padding方法，讓它成爲一個能夠按比例縮放的容器 
二、輪播圖裏的圖片不是須要的比例怎麼辦（又回到這個問題上來了，如今知道該怎麼作了吧）

優化前：

優化後：

就能夠變成一個：不用根據圖片尺寸，均可以根據比例自適應的輪播圖啦。

---

關於兼容性：

這個樣式裏有利用到CSS3的屬性： background-size:cover; 那當咱們作響應式、移動端的頁面時，確定也要用到CSS3的媒體查詢或者其餘的CSS3樣式，並且移動端的瀏覽器對CSS3的支持性比較好，因此這一點應該是不用擔憂的。