缩略图不变形

需求：图片按九宫格展现，图片展现其缩略图（不变形），点击可看大图。（本文暂时只讨论展现缩略图不变形的方案）图片要求有两点：1.缩略，2.不变形。须要同时实现这两点，也就是图片的width和height中较小者应该彻底显示，较大的截取中间的部分。以下图是这样：
而不是:

分析：想要根据图片的宽高来判断若是截取，须要图片load以后，在load以前要保证九宫格样式不乱，因此我在图片外面包了一层div，对div限制宽度和高度，并overflow:hidden

<div class="img-box">
    <img :src="pic.src" @load="curPic($event)">
</div>
<div class="img-box">
    <img :src="pic.src" @load="curPic($event)">
</div>
<div class="img-box">
    <img :src="pic.src" @load="curPic($event)">
</div>

.img-box{
    display: inline-block;
    width:33.3%;
    height:113px;
    overflow:hidden;
}

curPic(e) {
// 获取九宫格其中一格的宽高
    const width = document.getElementsByClassName('img-box')[0].offsetWidth;
    const height = document.getElementsByClassName('img-box')[0].offsetHeight;
    // 获取图片的宽高
    const realWidth = e.target.offsetWidth;
    const realHeight = e.target.offsetHeight;

    if (realWidth > realHeight) {
    // 若是图片width大于height，就将height彻底展现，width按比例减少
       e.target.style.width = `${realWidth * (height / realHeight)}px`;
    } else {
    // 若是图片height大于width，就将width彻底展现，height按比例减少
       e.target.style.height = `${realHeight * (width / realWidth)}px`;
    }
},

通过以上缩小，效果以下图

此时已经没变形了，可是展现的是左上角，不是为中间部分，接着对图片进行垂直水平居中便可

.img-box{
    display: inline-block;
    width:33.3%;
    height:113px;
    overflow:hidden;
    position: relative;
    img{
        position:absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
    }
}

此时就能够正确展现了~