css圖片以最長邊顯示

前言

商品列表的展覽區域，咱們能看到不少商戶上傳的商品，可是商戶上傳商品的圖片比例每每都是不定的，定死一個寬高展現圖片，又會形成不少圖片被拉伸或壓縮變形，咱們要分析一個比較友好的解決方法，以下圖：

只要稍微控制一下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%;
}

複製代碼

最後結果: