今天做了个小功能,需要实现图片居中铺满屏幕,并且不能有留白更不能被压瘪,如下图:
直接网上搜索铺满屏幕,大部分都是宽度直接100%,因为这里需要实现图片居中并且同时要铺满屏幕,并且肯定不能被压瘪,所以直接宽度,高度100%肯定不行的,所以我这里选择使用css的scale属性来实现。
原理就是首先图片width=‘100%’,然后判断图片的高度是否小于父元素的高度,因为我这里不是瀑布流,所以父元素肯定是定死,然后图片自适应的,当小于父元素高度时就将scale加个0.1左右,然后不断循环判断,直到图片高度大于父元素高度,当然前提肯定先将图片垂直居中,这样放大以后才能居中铺满整个屏幕并且不被压缩。
好了,给下源码:
dom元素:
<span class="photo-parent"><img :src="" class="photo-img" ></span>
css样式:
.photo-parent{
width:100px,
height:150px ;
position: relative;
}
.photo-img {
width: 100%;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
js封装:
scaleMain(imglistClass, imglistParentClass) {
setTimeout(() => {
let photoArry = []
let timeStart = setInterval(() => {
let photoImg = document.getElementsByClassName(imglistClass);
let photoParentHeight = document.getElementsByClassName(imglistParentClass)[0].offsetHeight;
let timeEnd = 0;
for (let i = 0; i < photoImg.length; i++) {
if (photoArry[i] == undefined) {
photoArry[i] = {};
photoArry[i].num = 0.1;
}
if ((photoImg[i].offsetHeight * (photoArry[i].num + 1)) < photoParentHeight) {
photoArry[i].num = photoArry[i].num + 0.1 + 1
photoImg[i].style.transform = 'scale(' + photoArry[i].num + ')'
timeEnd = 1;
}
if (i == photoImg.length - 1) {
if (timeEnd !== 1) {
clearInterval(timeStart)
}
}
}
})
}, 1000)
}
使用方法:this.scaleMain(‘photo-img’, ‘photo-parent’);
因为我这里使用的vue脚手架,所以函数这样的引用和定义的,如果没有使用框架的,可以自行修改,函数里面也比较简单,imglistClass是img的class,主要用来获取有多少个img,而imglistParentClass则是上边span的class,主要用来获取下父元素的高度,因为我实际用的是rem(这里为了展示,所以改成了px)所以你如果确定span的高度可以直接在函数里改下就可以。
当然,以上也是实在找不到有什么好的实现方式,自行拟定的一个方式,如果有大神有更好的方式或者简便的插件,可以评论推荐。
写完这个文章两天后,发现有点小问题,上述函数只针对span高度一样的,如果高度不一致就需要做如下修改:
如图:
可以看到上图的布局,有点花里胡哨,当然,花里胡哨在一切实力面前都是渣渣,所以这里我们把函数稍微改一下,用法及其说明还是参考最上边的。
scaleMain(imglistClass, imglistParentClass) {
setTimeout(() => {
let photoArry = []
let timeStart = setInterval(() => {
let photoImg = document.getElementsByClassName(imglistClass);
let photoParentHeight = null;
let timeEnd = 0;
for (let i = 0; i < photoImg.length; i++) {
if (photoArry[i] == undefined) {
photoArry[i] = {};
photoArry[i].num = 0;
}
photoParentHeight = document.getElementsByClassName(imglistParentClass)[i].offsetHeight;
if ((photoImg[i].offsetHeight * (photoArry[i].num + 1)) < photoParentHeight) {
photoArry[i].num = photoArry[i].num + 0.1 + 1
photoImg[i].style.transform = 'scale(' + photoArry[i].num + ')'
timeEnd = 1;
}
if (i == photoImg.length - 1) {
if (timeEnd !== 1) {
clearInterval(timeStart)
}
}
}
})
})
},
这里主要将获取span高度放到了循环里,可以循环获取每个的span不同的高度进行比较。