需求说明

1. 图片覆盖整个浏览器窗口
2. 图片处于整个页面最底层
3. 根据浏览器窗口的变化改变图片大小
4. 不能使图片变形
5. 图片始终在浏览器窗口的中心位置
6. 适应web端和移动端

实现方法

参考许多文章后，发现最实用的布局是edge浏览器的新标签页的背景图片布局。

通过整合多方方案，得出最佳方案。

不论是使用图片标签引入图片还是块级标签添加背景图片，都可以通过此方法实现自适应。

//模板标签
<template>
//外层盒子需要动态绑定宽高属性
  <div class="register" :style="{width: fullWidth+'px', height:fullHeight+'px'}">
  //内层盒子用于添加背景图片
  //可以不用绑定动态宽高
  //如果不绑定动态宽高，则需要css样式设置其宽高为100%，甚至可以设置超过100%
    <div class="img_box" :style="{width: fullWidth+'px'}"></div>
  </div>
</template>

//代码实现
<script>
export default {
  name: 'MyApp',
  data () {
    return {
    //保存数据，实现动态渲染
    //注意：这里没有带‘px’单位，在上面添加动态样式时，需要加上px单位！！！
      fullWidth: document.documentElement.clientWidth,
      fullHeight: document.documentElement.clientHeight

    }
  },
  methods: {
  //定义数据获取方法
    handleResize () {
      this.fullWidth = document.documentElement.clientWidth
      this.fullHeight = document.documentElement.clientHeight
    }
  },
  //两个生命周期中监听窗口大小变化
  //参数1：监听的事件
  //参数2：一个回调函数，用于赋值
  created () {
    window.addEventListener('resize', this.handleResize)
  },
  beforeUnmount () {
    window.removeEventListener('resize', this.handleResize)
  }
}
</script>

//样式实现
<style lang="less" scoped>
.register {
//固定外层盒子，不受其他盒子影响
//放在最底层
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  .img_box {
  //这里外层盒子已经固定定位了，其实可以不加定位
    position: absolute;
    background-image: url(./assets/ash98-n8ely.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    //保证盒子始终在窗口中心
    background-position: center center;
    //避免窗口周围留白
    width: 101%;
    height: 101%;
  }
}

</style>

效果展示