微信朋友圈九宫格图片自适应宽高

<ul class="figure-list">
<li>
        <figure style="background-image:url(img/09.jpg)"></figure>
</li>
<li>
<figure style="background-image:url(img/8.jpg)"></figure>
</li>
<li>
<figure style="background-image:url(img/6.jpg)"></figure>
</li>
<li>
<figure style="background-image:url(img/9.jpg)"></figure>
</li>

</ul>

.figure-list{
margin-top: 10px;
}
.figure-list li{
list-style: none;
float: left;
width: 31%;
margin: 0 2% 2% 0;
}
.figure-list figure{
position: relative;
width: 100%;
height: 0;
overflow: hidden;
margin: 0;
padding-bottom: 100%; /* 关键就在这里 */
background-position: center;
background-repeat: no-repeat;
background-size: cover;

}

用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）