前言
商品列表的展览区域,我们能看到很多商户上传的商品,但是商户上传商品的图片比例往往都是不定的,定死一个宽高展示图片,又会造成很多图片被拉伸或压缩变形,我们要分析一个比较友好的解决方法,如下图:
只要稍微控制一下css就能实现这个功能
代码
html代码
<div>
<ul>
<li class="img_list">
<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/9/5/16d00796d380aa17~tplv-t2oaga2asx-image.image" alt="">
</li>
<li class="img_list">
<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/9/5/16d0079fcd520309~tplv-t2oaga2asx-image.image" alt="">
</li>
<li class="img_list">
<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/9/5/16d007a8f9f43f0d~tplv-t2oaga2asx-image.image" alt="">
</li>
<li class="img_list">
<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/9/5/16d007d38553fd5f~tplv-t2oaga2asx-image.image" 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%;
}
最后结果: