不規則圖片列表實現響應式佈局

技術開發和實際運營老是有很大差異的，好比常見的圖片列表，通常設計圖上都是固定尺寸大小的，可是實際操做起來並無太多人去ps修剪圖片到知道的尺寸，大部分都是差很少比例的圖片就直接上傳了，爲了解決不規則圖片列表展現問題有相應的解決方案例如瀑布流，或者相冊等，可是對於多終端響應式的網站這是很是頭疼的。

1、常見的圖片固定大小方式弊端

1. 固定圖片寬高，圖片變形

2. 響應式佈局跨度不能太大，須要跨度小修改寬度頻繁

3. 不利於左右間距控制等

2、兩種解決方案

方案一：使用rem來書寫響應式的寬高，寬高根據font-size的大小來實現動態改版寬度。

優勢在於響應式佈局很是方便，都是按照比例進行的縮放，弊端是在於若是圖片不規則，那麼圖片變形是不免的。爲了解決圖片變形問題咱們介紹一下方案二.

方案二：使用定位比例法

圖片外層的盒子（div或者dt）定義以下樣式：

---

height:0;   //高度設置爲0
width:23%;    //使用百分比寬度和百分比邊距
margin:0 1%;
position: relative;  //定位
padding-bottom:75%;  //使用padding來按照比例撐開div
overflow: hidden;    //溢出部分隱藏

這時候盒子內部的圖片設置寬度百分百，高度自適應，定位在（0,0）點，圖片會被外層盒子自動截取，由於外層的盒子padding和寬度都是百分比的，因此整個佈局是百分比顯示的。

---

position: absolute;    //定位在0,0位置，解決padding佔高圖片不在最頂端問題
left: 0;
top: 0;
width: 100%            //自適應高度，寬度百分比
height: auto;

優勢以下：

1. 按照寬度的比高度的百分比來設置padding，可視區域按照比例縮放

2. 解決圖片變形的困擾。

3. 一次佈局多終端友好