设置一行展示1张、2张,3张或者4张图片

话不多说，先看看效果

第一张展示的是一张图，其他的以此展示多张图（如需要加padding，自行加载就可以了），这种写法保证了图片的等比例缩放，及时浏览器页面大小发生变化，图片也不会发生 变形！！！

接下来上代码啦：

HTML

<div class="pics6">
            <div class="pics6_status1">
                <img class="status1-pic" src="http://img.mengdian.com/image/31/c9/47/6f/20170329/22bc0f13e260110192727ab3615cbbaa.png?x-oss-process=image/quality,q_80&amp;mdw=750&amp;mdh=340">
            </div>
            <div id="status2_pics">
                <ul class="pics6_status2">
                    <li>
                        <img class="status2-pic" src="http://shopimg.weimob.com/100507453/Goods/1701191815042349.png">
                        <div>11111</div>
                        <div>22222</div>
                    </li>
                    <li>
                        <img class="status2-pic" src="http://shopimg.weimob.com/100507453/Goods/1701191815042349.png">
                        <div>11111</div>
                        <div>22222</div>
                    </li>
                </ul>
            </div>
            <div id="status3_pics">
                <ul class="pics6_status3">
                    <li>
                        <img class="status3-pic" src="http://shopimg.weimob.com/100507453/Goods/1701191815042349.png">
                        <div>11111</div>
                        <div>22222</div>
                    </li>
                    <li>
                        <img class="status3-pic" src="http://shopimg.weimob.com/100507453/Goods/1701191815042349.png">
                        <div>11111</div>
                        <div>22222</div>
                    </li>
                    <li>
                        <img class="status3-pic" src="http://shopimg.weimob.com/100507453/Goods/1701191815042349.png">
                        <div>11111</div>
                        <div>22222</div>
                    </li>
                </ul>
            </div>
            <div id="status4_pics">
                <ul class="pics6_status4">
                    <li>
                        <img class="status4-pic" src="http://shopimg.weimob.com/100507453/Goods/1701191815042349.png">
                        <div>11111</div>
                        <div>22222</div>
                    </li>
                    <li>
                        <img class="status4-pic" src="http://shopimg.weimob.com/100507453/Goods/1701191815042349.png">
                        <div>11111</div>
                        <div>22222</div>
                    </li>
                    <li>
                        <img class="status4-pic" src="http://shopimg.weimob.com/100507453/Goods/1701191815042349.png">
                        <div>11111</div>
                        <div>22222</div>
                    </li>
                    <li>
                        <img class="status4-pic" src="http://shopimg.weimob.com/100507453/Goods/1701191815042349.png">
                        <div>11111</div>
                        <div>22222</div>
                    </li>
                </ul>
            </div>
        </div>

---

CSS

.pics6 .pics6_status1  .status1-pic{
    width: 100%;
    height: auto;
}
.pics6 .pics6_status2,.pics6 .pics6_status3,.pics6 .pics6_status4{
    display: flex;
    display: -webkit-flex;
}
.pics6 .pics6_status2 li{
    width: 50%;
    height: 100%;
    text-align: center;
}
.pics6 .pics6_status2 li .status2-pic,.pics6 .pics6_status3 li .status3-pic,.pics6 .pics6_status4 li .status4-pic{
    width: 100%;
    height: 100%;
}
.pics6 .pics6_status3 li{
    width: 33.333%;
    height: 100%;
    text-align: center;
}
.pics6 .pics6_status4 li{
    width: 25%;
    height: 100%;
    text-align: center;
}

上面带代码可以直接复制使用，简单明了！