图片大小自适应布局

需求

近来碰到一个这样的需求：须要每一行都是固定数量的图片，间距固定，左右第一张图片距离手机边的距离是固定的，随着屏幕大小变化，图片自适应变大变小。

解决方案

图片宽高保持一致

图片宽高设置百分比时，是依照于父元素的宽高进行设置的，因此仅仅是设置宽高不能解决这个问题，可是咱们知道，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覆盖而紧贴左侧边，完成。