图片大小自适应并上下居中

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sinat_36146776/article/details/86592570

<div class="flex-center listing-img">
              <img v-if="item.imgUrl" v-bind:src="item.imgUrl" alt="not find picture">
              <img v-if="!item.imgUrl" src="../../assets/img/detail-not-image.png"
                   alt="not find picture" v-sf-img>
            </div>

img1是默认显示图片

  .listing-img{
    width: 100%;
    min-height: 270px;
    max-height: 320px;
  }
  .listing-img>img{
    display: inline-block;
    height: auto;
    max-width: 100%;
    max-height: 320px;
  }
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

预览图1：太高的图片，缩小高度

预览图2：太宽的图片，缩小宽度

预览图3：正常的图片