在網頁應用中經常會用到產品展示 圖片展示等功能，但每個圖片大小不一，怎么讓它們自動填滿固定大小的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>分別找了幾個不同尺寸的圖片，出來的效果如下：
這樣基本就可以滿足大部分布局需求了。
原文地址：http://www.wjglgs.com/library/202010/54.html(張家口導航-睿兒知識庫)