图片大小自适应布局近来碰到一个这样的需求：需要每一行都是固定数量的图片，间距固定，左右第一张图片距离手机边的距离是固定的

需求

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

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