前言
商品列表的展览区域，我们能看到很多商户上传的商品，但是商户上传商品的图片比例往往都是不定的，定死一个宽高展示图片，又会造成很多图片被拉伸或压缩变形，我们要分析一个比较友好的解决方法，如下图：
image
只要稍微控制一下css就能实现这个功能
代码
html代码
<div>
<ul>
<li class="img_list">
<img src="https://user-gold-cdn.xitu.io/2019/9/5/16d00796d380aa17?w=588&h=315&f=png&s=14168" alt="">
</li>
<li class="img_list">
<img src="https://user-gold-cdn.xitu.io/2019/9/5/16d0079fcd520309?w=667&h=1014&f=png&s=43148" alt="">
</li>
<li class="img_list">
<img src="https://user-gold-cdn.xitu.io/2019/9/5/16d007a8f9f43f0d?w=588&h=154&f=png&s=10831" alt="">
</li>
<li class="img_list">
<img src="https://user-gold-cdn.xitu.io/2019/9/5/16d007d38553fd5f?w=167&h=167&f=png&s=6491" alt="">
</li>
</ul>
</div>
css代码
.img_list{
width: 300px;
height: 300px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.img_list>img{
width: auto;
height: auto;
max-width: 100%;
max-height:100%;
}
最后结果:
image
