小技巧：图片自适应宽度和高度垂直居中

网站上传图片时，如果不从后台限制图片的宽高，图片就会出现宽高大小不一，有的宽大于高，有的高大于宽，在前端如果再不进行限制，可能就会出现下面的情况：


图片变形了。那么，解决办法要么就是给个宽度不给高度，要么给高不给宽，超出裁切。

下面的代码实现了无论后端上传什么图片，都不会变形，并且居中完整显示：

1、html代码：

<ul>
    <li><img src="images/1.png /></li>
    <li><img src="images/2.png /></li>
</ul>

2、css代码：

li{
    width:300px;
    height:300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

img{
    max-width:100%;
    max-height: 100%;
    width:auto;
    height: auto;
}

最终效果图：