css设置图片在固定容器下高度铺满，宽度居中

今日组员在调节图片自适应时遇到一个问题前来问我，就是无论什么比例的图片都要显示在固定容器里（图片的宽高一定会比容器大），不变形，说白了就是高度铺满，宽度居中显示，这个需求其实很简单，最大的知识点就是元素绝对居中的问题，下面给出解决方案：

<ul>
   <li><img src="../../assets/a1.png"></li>
   <li><img src="../../assets/a2.png"></li>
 </ul>

li{
   width: 164px;
   height:246px;
   border: 1px solid #e2e9f3;
   position:relative;
   overflow:hidden;
   img{
     position: absolute;
     top:0;
     left:50%;
     height:100%;
     transform:translateX(-50%);
   }
 }