css图片等比放大居中|超出部分隐藏
图片等比放大居中
在一些情况下需要保证图片缩略图窗口大小固定,但是图片分辨率比例多种多样,需要在展示固定比例的窗口下展示不同分辨率的图片,还需保证展示的图片不被拉伸变形,保持原有比例的基础上进行等比放大。
// 外层
.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);
}