一般的社交项目都会有图片功能,特别是多图的情况下,九张图布局最常见也用的最多的就是九宫格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 属性设置一样的高度,一气呵成。