css設定画像は固定容器の下に高さを敷き詰め、幅を中央にする

今日、メンバーは画像の適応を調整する時に1つの問題に出会って私に聞いて、どんな割合の画像も固定容器の中に表示しなければならない(画像の幅は容器より大きいに違いない)、変形しないで、はっきり言って高さがいっぱいで、幅が中央に表示して、この需要は実はとても簡単で、最大の知識点は要素が絶対的に中央にある問題です.次のソリューションを示します.

<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%);
   }
 }