vue+vant 监听移动端页面分辨率来展示图片大小（确定背景图片的background-size使用cover还是contain）

本文链接：https://blog.youkuaiyun.com/DcTbnk/article/details/115732513

本文介绍了一个Vue组件中使用`background-size: cover/contain`来适配背景图片的方法。根据窗口大小变化动态调整`cover`或`contain`，确保图片在不同屏幕尺寸下展示效果。同时，根据系统标识加载不同的登录背景图片，实现背景图片的响应式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

background-size：cover/contain
cover是用于图片小于容器，把图片等比例铺满，这个会裁剪图片。
container是用于图片大于容器，把图片等比例缩小，这个会显示完整图片但不会铺满。

mounted () {
    // 初始化背景图
    this.$nextTick(() => {
      // console.log('打印photo的值', window.ApiConfig.systemFlag)
      // 首先先拿到配置文件中的系统标识 进行switch case when 判断
      // 如果是product 就是之前的login.png  否则 login{systemFlag}.png
      this.setBackSize()
      this.setBackground()
    })
    // 当窗口大小发生改变时会触发这个事件
    window.onresize = () => {
      this.setBackSize()
      this.setBackground()
    }
  },
  methods: {
    // 设置背景图是以哪种background-size形式展示的
    setBackSize () {
    // 510 大约是图片的宽
      if (document.documentElement.offsetWidth > 510) {
        this.containOrCover = 'cover'
      } else {
        this.containOrCover = 'contain'
      }
    },
    // 设置那张图片为背景图
    setBackground () {
      switch (window.ApiConfig.systemFlag) {
        case 'product':
          this.photo = require('../assets/login.png')
          this.$refs.loginBackground.style = `background:url(${this.photo}) center top no-repeat;background-size:${this.containOrCover};`
          break
        default:
          this.photo = require(`../assets/image/login${window.ApiConfig.systemFlag}.png`)
          this.$refs.loginBackground.style = `background:url(${this.photo}) center top no-repeat;background-size:${this.containOrCover};`
      }
    },
    ...
  }