图片居中铺满盒子

今天做了个小功能，需要实现图片居中铺满屏幕，并且不能有留白更不能被压瘪，如下图：

直接网上搜索铺满屏幕，大部分都是宽度直接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不同的高度进行比较。