不让图片失真，使大小不一的图片整齐排列！

作为前端er,肯定碰到过将一组要将一组图标整齐排列的问题，图片一样大还好，不一样大的话，没经验还真是烦人呢。

如图，排列不整齐美观。为了方便你我他，我加了边框

如果粗暴的把图片设置为一样大小，那图片会失去原有比例，导致伸缩，不雅。一个一个调整也不靠谱。

如何是好。其实很简单，在给4个图片外面分别加个一样大小的div，然后让图片居中就好啦。

 

div {

border: 1px solid blue;

width: 130px;

height: 130px;

position: relative;

}

 

div>img {

border: 1px solid red;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

 

居中后：

 

 

还算整齐。忽视忽略我随便截的图。当然，一般我们都会把图片高度截成一样高的，这样再设置居中就会看起来很整齐，很舒服。