后台获取一组宽高比例不一致图片 达到图片不变形 、水平居中铺满同尺寸盒子的效果
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; } } }
相关文章推荐
- 在固定尺寸的盒子,水平垂直居中不知宽高的图片
- JS等比例缩放图片以及让图片水平垂直居中显示
- js控制图片自动缩放,实现铺满盒子,不变形,完全局中
- 微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
- 要做瀑布流后台不返回图片宽高尺寸怎么办?
- js控制图片自动缩放,实现铺满盒子,不变形,完全局中
- 纯css实现未知尺寸图片在DIV中垂直水平居中(超简单)
- javascript的未知尺寸图片保持比例水平垂直居中函数
- 微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
- 未知尺寸图片在已知尺寸容器下的水平垂直居中
- css实现图片在div中水平和垂直居中(但图片宽高要小于div宽高)
- 未知宽高图片的水平垂直居中
- 修改后的轮显图片显示代码(上下左右居中,不变形,取最高值,另边按此比例显示)--ff/ie8
- [置顶] 未知图片宽高水平垂直居中
- JS等比例缩放图片并构建图片水平垂直居中解决方案
- table-cell实现未知宽高图片,文本水平垂直居中在div
- 微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
- 未知宽高的图片水平垂直居中的几种方法
- 未知宽高图片在容器内水平垂直居中