前言

商品列表的展覽區(qū)域，我們能看到很多商戶上傳的商品，但是商戶上傳商品的圖片比例往往都是不定的，定死一個寬高展示圖片，又會造成很多圖片被拉伸或壓縮變形，我們要分析一個比較友好的解決方法，如下圖：

image

只要稍微控制一下css就能實現(xiàn)這個功能

代碼

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%;
}

最后結(jié)果:

image