您的位置:首页 > 其它

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

2018-12-21 17:16 323 查看
[code]//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;
        }
    }
}

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: