Vue Element UI 之背景图自适应屏幕（多种方法分析，含可取不可取）

需求说明：背景图的 图片高度过高，需要根据设备宽高动态显示图片大小， 多余部分剪掉 / 不显示

尝试以下方法：

一、通过 CSS：background-image

方法一尝试：background-position: 0 0;

不足：需要给div一个固定的高度，不能实现动态高度

/* 需要加背景的div */
.register{
    width: 100%;
	height: 1060px; /* 固定高度 */
	background-image: url(../assets/img/bg1.png);
	background-position: 0 0;
	background-repeat: no-repeat;
}

（OK）方法二尝试：background-size: cover;【可采用】

效果分析：当设备宽高比例和图片宽高比例一致时，图片能够实现自适应；当设备宽高比例和图片宽高比例不一致时，图片中多出部分将不显示。因此可以自适应PC端，但是无法自适应移动端和 iPad

注意：使用 background-size: cover; 时需要带 position: absolute;

.img_box{
	width: 100%;height: 100%;
	background-image: url(../assets/img/bg01.png);
	background-size: cover; /* 使图片平铺满整个浏览器（从宽和高的最大需求方面来满足，会使某些部分无法显示在区域中） */
	position: absolute; /* 不可缺少 */
	z-index: -1;
	background-repeat: no-repeat;
	/* overflow: hidden; */
	/* overflow: auto; */
}
/* 注释部分要不要都一样 */

效果图：宽高比例相同

宽高比例不同：

二、通过 img 标签

（OK）思路 1、img标签动态绑定宽度（:width=“fullWidth”）【可采用，较好】

图片存在的问题：所选的图片宽度撑满时高度溢出，高度撑满时宽度不够

不足1：如果只设置动态获取的高度值，不设置宽度值，可想而知，图片宽度是无法铺满屏幕的，会出现留白部分
不足2：若是同时给图片宽度值，会使图片损失原有比例（因为强制了宽高），如果宽度相差不多的话，损失便不是很明显，没有强迫症或者严格要求也是可以采用的

目前找到的比较好的处理办法是：设置动态宽度 + position：fixed

/* 父级 register 设置动态宽高自适应屏幕大小 */
<div class="register" :height="fullHeight" :width="fullWidth">
	<div class="img_box">
		<img src="../assets/img/bg01.png" :width="fullWidth" />
	</div>
</div>

img{
	position: fixed; /* 添加 position，让图片不随滚动条滚动 */
}

动态获取设备宽高的代码：

data(){
    return{
        fullWidth:document.documentElement.clientWidth
    }
},
created(){
    window.addEventListener('resize', this.handleResize)
},
beforeDestroy: function () {
    window.removeEventListener('resize', this.handleResize)
},
methods: {
    handleResize (event) {
        this.fullWidth = document.documentElement.clientWidth
    }
}  

效果图：

—————————————— 》》有不足的效果展示《《——————————————

/* 同时设置宽高 */
<img src="../assets/img/bg1.png" width="90%" :height="fullHeight" />

效果图：图片损失了原有比例（因为强制了宽高）

/* 只设置动态高度 */
<img src="../assets/img/bg1.png" :height="fullHeight" />

效果图：宽度不足有空白区

/* 只设置动态宽度 */
<img src="../assets/img/bg1.png" :width="fullWidth" />

效果图：高度溢出，出现滚动条

——————————————》》展示结束《《——————————————

思路 2、在动态绑定宽度（:width=“fullWidth”）之后，想方法剪掉多余的高度

方法1、给图片设置clip和position

不足：rect 的参数只有给设置固定值的时候才有效，动态宽高剪切无法实现
特点：position会使得其脱离文档流

方法2、给img父级设置宽高和overflow【在设置固定值下，效果可采用】

overflow：hidden；
不足：只有给父级设置固定高度的时候才有效，动态高度无法实现

这里就不放效果图了

思路 3、给图片加一个父级div，并进行以下设置【否定】

不足：背景图宽高无法同时达到要求，不能自适应PC端，亦不自适应 iPad 和 移动端

.img_box{
	width: 100%;height: 100%;
	position: absolute;
	left: 0;top: 0;
	z-index: -1;
}
img{
	height: 100%;
	left: 0;top: 0;
}

效果：宽高不能统一（宽度足够时，高度溢出；高度足够时，宽度不足），这里就不放图了

———————————————————— 手动分割线 ————————————————————

《 附上background-size的用法 》

background-size 可以取以下的值：

• length：设置背景图像的高度和宽度，接收两个值。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。auto 即为默认，按照图片比例跟随相应的宽度/高度。

• percentage：以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。

• cover ：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
  简言之，使图片平铺满整个浏览器（从宽和高的最大需求方面来满足，会使某些部分无法显示在区域中）

• contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。（当浏览器宽度/高度大于图片时，将会出现空白区域）