css 图片以最长边显示

前言

商品列表的展览区域，我们能看到很多商户上传的商品，但是商户上传商品的图片比例往往都是不定的，定死一个宽高展示图片，又会造成很多图片被拉伸或压缩变形，我们要分析一个比较友好的解决方法，如下图：

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