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

最新推荐文章于 2023-04-06 09:43:39 发布

原创最新推荐文章于 2023-04-06 09:43:39 发布 · 2.5w 阅读

48 ·

CC 4.0 BY-SA版权

文章标签：

#设置一行展示多张图片 #设置一行展示一张图片 #设置一行展示两张图片 #设置一行展示三张图片 #设置一行展示四张图片

前端开发专栏收录该内容

238 篇文章

订阅专栏

本文介绍了一种实现图片自适应浏览器窗口大小变化的方法，确保图片在不同屏幕尺寸下均能保持等比例缩放而不失真。通过HTML和CSS代码示例展示了如何针对不同数量的图片进行布局调整。

话不多说，先看看效果
这里写图片描述
第一张展示的是一张图，其他的以此展示多张图（如需要加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;
}