縮略圖不變形

需求：圖片按九宮格展現，圖片展現其縮略圖（不變形），點擊可看大圖。（本文暫時只討論展現縮略圖不變形的方案）圖片要求有兩點：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%);
    }
}

此時就能夠正確展現了~