html5设置图片居中自适应,HTML5 图片宽高自适应，居中裁剪不失真

一，使用 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;

}