圖片大小自適應佈局

需求

近來碰到一個這樣的需求：須要每一行都是固定數量的圖片，間距固定，左右第一張圖片距離手機邊的距離是固定的，隨着屏幕大小變化，圖片自適應變大變小。

解決方案

圖片寬高保持一致

圖片寬高設置百分比時，是依照於父元素的寬高進行設置的，因此僅僅是設置寬高不能解決這個問題，可是咱們知道，padding的百分比都是以寬度爲基準進行計算的，並且padding也是內容區的一部分，因此能夠結合background-image進行使用，具體以下：

每一行圖片4個，每一個圖片之間的間距爲5px，圖片平鋪。

width: calc((100% - 15px)/4);
 padding-bottom: calc((100% - 15px)/4);
 -moz-background-size: 100% 100%;
 background-size: 100% 100%;
複製代碼

還少了background-image，若是是在vue中，寫法以下：

<div :style="{'background-image': 'url(' + item + ')'}"></div>
複製代碼

如此一來，若是須要動態顯示的，也將能夠完成，只須要在div上或者外層再加一個v-for循環便可。

如下是給這些圖片加間距的代碼：

兩個圖片之間的間距爲5px，上下兩行之間也是5px

&:nth-child(n) {
    margin-left: 5px;
    margin-top: 5px
}

&:nth-child(4n - 3) {
    margin-left: 0;
}
複製代碼

這樣，全部圖片以前間距爲5px，而第一個則被margin-left: 0覆蓋而緊貼左側邊，完成。