Css實現圖片裁剪居中（圖片不變形）

官方文檔（可以看效果）：https://www.w3school.com.cn/css/css3_object-fit.asp
css部分

.test_img{
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  margin-top: 5px;
  img{
    width:100%;
    height: 100%;
    object-fit:cover;
  }
}

object-fit屬性詳解

語法

object-fit 屬性由下列的值中的單獨一個關鍵字來指定。

取值

contain
被替換的內容將被縮放，以在填充元素的內容框時保持其寬高比。 整個對象在填充盒子的同時保留其長寬比，因此如果寬高比與框的寬高比不匹配，該對象將被添加‘黑邊’

cover

被替換的內容在保持其寬高比的同時填充元素的整個內容框。如果對象的寬高比與內容框不相匹配，該對象將被剪裁以適應內容框。

fill

被替換的內容正好填充元素的內容框。整個對象將完全填充此框。如果對象的寬高比與內容框不相匹配，那么該對象將被拉伸以適應內容框。

none

被替換的內容將保持其原有的尺寸。

scale-down

內容的尺寸與 none 或 contain 中的一個相同，取決於它們兩個之間誰得到的對象尺寸會更小一些。