css图片等比放大居中|超出部分隐藏-526互联

图片等比放大居中

在一些情况下需要保证图片缩略图窗口大小固定，但是图片分辨率比例多种多样，需要在展示固定比例的窗口下展示不同分辨率的图片，还需保证展示的图片不被拉伸变形，保持原有比例的基础上进行等比放大。

// 外层
.img-box {
    // 等比放大图片，超出部分隐藏
    width: 120px;
    height: 120px;
    position: relative;
    //--
    margin: 5px;
    display: inline-block;
    background-color: #fff;
    vertical-align: top;
}
// 内层
.item-img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    -webkit-transform: translate3d(-50%, -50%, 0);
}

部分