一,使用 JS,先上效果图,右图为定死宽高的效果,左图为处理之后的
1, 主要思路是,在图片 onload 后,将图片的宽高比和 div 容器的宽高比进行比较,
2, 从而确定拉伸或者压缩之后是宽还是高不足以填充容器
3,将不足以填充容器的方向设置为和容器一致
4,此时,图片的另一个方向可能超出容器,此时只要将图片做反方向的偏移,使其居中
5,容器定义超出部分不显示,以下是结合 Vue 的一个例子
图片居中#main {
font-size: 0;
}
.box {
display: inline-block;
vertical-align: center;
width: 150px;
height: 150px;
overflow: hidden;
margin: 50px 0 0 20px;
}