使用FLEX布局让不同大小的图片自适应固定大小的BOX

编辑:睿儿发表于:2020-10-11 15:36:28 13 次阅读

在网页应用中经常会用到产品展示 图片展示等功能,但每个图片大小不一,怎么让它们自动填满固定大小的BOX,就是开发人员需要考虑并做到的。

我们使用FLEX 来完成这项工作。

<style>
.c1{width:200px;height:200px; border:1px solid #ff3300;display:flex;margin:20px; overflow: hidden; text-align: center;justify-content:center;align-items:center; float: left;}
.c1 img{ width: 100%; }
</style>
<div class="c1">
<img src='ad4.jpg'  mode='aspectFill'>
</div>
<div  class="c1">
<img src='ad4.jpg'  mode='widthFix'>
</div>
<div class="c1">
<img src='ad4.jpg'  mode='scaleToFill'>
</div>
<div class="c1">
<img src='logo.jpg'  mode='aspectFill'>
</div>
<div class="c1">
<img src='logo.jpg'  mode='widthFix'>
</div>
<div  class="c1">
<img src='logo.jpg'  mode='scaleToFill'>
</div>
<div class="c1">
<img src='regleft.jpg'>
</div>
<div class="c1">
<img src='regleft.jpg' >
</div>
<div  class="c1">
<img src='regleft.jpg'  mode='scaleToFill'>
</div>
<div class="c1">
<img src='jia.png'>
</div>
<div class="c1">
<img src='jia.png' >
</div>
<div  class="c1">
<img src='jia.png'  mode='scaleToFill'>
</div>


分别找了几个不同尺寸的图片,出来的效果如下:

image.png


这样基本就可以满足大部分布局需求了。

原文地址:http://www.zjkdh.com/library/202010/54.html(张家口导航-睿儿知识库)

张家口睿儿网络科技有限公司版权所有