后台获取一组宽高比例不一致图片 达到图片不变形 、水平居中铺满同尺寸盒子的效果

//html部分

<div><img src="data[0].url" alt=""></div>
<div><img src="data[1].url" alt=""></div>
<div><img src="data[2].url" alt=""></div>//data[i].url后台获取的图片地址

//css部分

div{
      position: relative;
      width: 126px;
      height: 126px;
      overflow: hidden;
     }

  div>img{
       position: absolute;//水平居中
       top:0;
       left:50%;
       transform: translateX(-50%);
 }

//js部分

$("div img").on("load", function() {
        loadImg(this)
   });

//让图片不变形铺满显示在一个126的正方形盒子里面

function loadImg(ele) {
    if(ele.width > 126 || ele.height > 126) {
        if(ele.width / ele.height > 1) {
            ele.height = 126;
        } else {
            ele.width = 126;
        }
    } else {
        if(ele.width / ele.height > 1) {
            ele.height = 126;
        } else {
            ele.width = 126;
        }
    }
}

纯css方法

//html部分

<div><img src="data[0].url" alt=""></div>
<div><img src="data[1].url" alt=""></div>
<div><img src="data[2].url" alt=""></div>//data[i].url后台获取的图片地址

//css部分

  div>img{
      width:126px;
      height:126px;
      object-fit:cover;
 }