css图片以最长边显示

2,612 阅读1分钟

前言

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

image

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

最后结果:

image