仿微信朋友圈的九宫格图片。

一般的社交项目都会有图片功能，特别是多图的情况下，九张图布局最常见也用的最多的就是[九宫格]^(CELL)布局了，但是在前端写代码的时候就很麻烦了，因为你不知道客户选择的图片是多大还是多小的情况下，你是不可以设置高度，这样的设置会导致拉伸图片，变形。所以我们需要换一种思路来做，利用css的 background-image 属性来完成下面的步骤。
这样的好处 ：

可以自适应图片的宽高
可以设置图片显示的区域，是显示中间部分或者图片上面或者下部分
不需要 img 标签即可完成代码
废话不多说看下代码

<div class="wrapper clearfix">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
</div>

先写好布局骨架代码，接下来写上css

.wrapper {
    margin: 0 auto;
    width: 100%;
    max-width: 380px;
    user-select: none;
    margin-left: -4px;
}
.wrapper.clearfix:after {  /* 去除浮动 */
    clear: both; 
    content: "."; 
    display: block;
    height: 0; 
    visibility: hidden;
}
.wrapper.clearfix {
    zoom:1;
}
.list {
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
    position: relative;
     float: left;
    width: calc(33.333333% - 4px);
    padding-top: calc(33.333333% - 4px);
    margin-left: 4px;
        background-image: url('你自己的图片地址')
}
.list:not(:last-child) {
    margin-bottom: 4px;
}

这样的你图片不管怎么做都是正方行，利用 padding-top 属性设置一样的高度，一气呵成。