Vue Element UI 之背景图自适应屏幕（可取的方法）

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

尝试以下方法

一、通过 CSS：background-image

给 div 设置：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; /* 不可缺少 */
	/* overflow: hidden; */
	/* overflow: auto; */
	z-index: -1;
	background-repeat: no-repeat;
}
/* 注释部分要不要都一样 */

效果图：宽高比例相同

宽高比例不同：

二、通过 img 标签

给 img 标签动态绑定宽度（:width=“fullWidth”）

不足1：如果只设置动态获取的高度值，不设置宽度值，可想而知，图片宽度是无法铺满屏幕的，会出现留白部分

不足2：若是同时给图片宽度值，会使图片损失原有比例（因为强制了宽高），如果宽度相差不多的话，损失便不是很明显，没有强迫症或者严格要求也是可以采用的

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

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

img{
	position: fixed; /* 固定图片位置 */
}

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

    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
        }
    }  

该代码参考自：https://blog.csdn.net/Little_Pig_Bug/article/details/88408445

效果图：