技術標籤：jscss

固定容器 img自適應
方法一 給定外容器 內容器居中 剪裁邊緣

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

方法二
img標籤加入 以下屬性 固定寬高

object-fit: cover; 
object-position: top;/

方法三
第二種的方法就是引入背景圖

樣式中寫入

width: 125px;
height: 125px;
background-size: cover;