缩略图不变形

需求：图片按九宫格展示，图片展示其缩略图（不变形），点击可看大图。（本文暂时只讨论展示缩略图不变形的方案）图片要求有两点：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%);
    }
}

此时就可以正确展示了~

转载于:https://www.cnblogs.com/youhong/p/9520355.html