移动端图片自适应，img固定宽高，怎么解决不同尺寸图片显示会变形的问题

方案1：

    根据图片实际宽高和需要显示的容器宽高等比例拉伸或缩小
   1.父容器如div设置固定width和height，设置 overflow: hidden，设置相对定位;
   2. img设置绝对定位，设置最大宽度max-width:100%，left、top、right、bottom值为0，
   3. 设置margin:auto。这样可以解决不同尺寸的图片在同一个盒子里垂直水平居中，
   4. 看起来又不会显得图片变形。

<div class="img-container">
   <div class="img-item-container" v-for="(item, index) in imgList" :key="index">
        <img src="../../../assets/logo.png" alt="">
        <div class="delete-container" @click="removeImg(index)"><i class="delete-icon"></i></div>
   </div>
</div>
.img-container {
    
    
       padding: 0 15px 85px 16px;
       .img-item-container {
    
    
         height: 180px;
         margin-top: 16px;
         position: relative;
         overflow: hidden;
         border-radius: 8px;
         background: #fff;
         img {
    
    
           position: absolute;
           left: 0;
           top: 0;
           right: 0;
           bottom: 0;
           max-width: 100%;
           margin: auto;
         }
         .delete-container {
    
    
           .centre();
           width: 32px;
           height: 32px;
           position: absolute;
           top: 3px;
           right: 3px;
           background-color: rgba(255,255,255,0.9);
           .delete-icon {
    
    
             .icon(24px,"../../../assets/images/workorder/common_delete.svg");
           }
         }
       }
     }

方案2：

    <style>
        .image-box {
    
    
            width: 300px;
            height: 300px;
        }
        .image {
    
    
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
        }
    </style>
    <div class="image-box">
        <img class="image" src="test.png">
    </div>