使用FLEX布局讓不同大小的圖片自適應固定大小的BOX

編輯:睿兒發表于:2020-10-11 15:36:28 26 次閱讀

在網頁應用中經常會用到產品展示 圖片展示等功能,但每個圖片大小不一,怎么讓它們自動填滿固定大小的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.376564.tw/library/202010/54.html(張家口導航-睿兒知識庫)

張家口睿兒網絡科技有限公司版權所有
广西快乐双彩玩法说明 广西快乐10分网址彩彩娱 古怪猴子官方下载网站 吉林时时彩中奖规则 北京时时彩赛车记录 浙江11选5爱彩乐 新疆福利彩票喜乐彩 山东老11选5快乐彩票 2021年莱特币前景如何 欢乐真人麻将游戏规则 南国彩票论坛 og视讯赌场在哪里 pc蛋蛋预测哪些稳吗 山西11选5胆拖 排列3百十和值距离 五分赛车稳定赚钱规划投注 股票分析走势