Vue全屏背景图片设置

XCUMY • 2025-04-12 01:13 • 编程

在Vue项目中，全屏背景图片是一个常见的需求，可以通过下面几个方面阐述如何实现。这篇文章将从以下方面对Vue全屏背景图片设置进行详细阐述。

一、预处理

在开始显示全屏背景图片之前，需要先进行一些预处理工作。首先，需要新建一个单独的Vue组件，并在其中添加代码，该代码用于加载图片并调整其尺寸。

 <template>
  <img :src="bgSrc" class="full-img" />
</template>

<script>
export default {
  data() {
    return {
      bgSrc: require('@/assets/bg.jpg')
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.resizeImage()
      window.addEventListener('resize', this.resizeImage)
    })
  },
  methods: {
    resizeImage() {
      const img = new Image()
      img.src = this.bgSrc
      img.onload = () => {
        const rate = img.width / img.height
        const screenRate = window.innerWidth / window.innerHeight
        const fullImg = document.querySelector('.full-img')
        if (rate < screenRate) {
          fullImg.style.width = 'auto'
          fullImg.style.height = '100%'
        } else {
          fullImg.style.width = '100%'
          fullImg.style.height = 'auto'
        }
      }
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeImage)
  }
}
</script>

<style>
  .full-img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
</style>

二、设置全屏背景图片

在预处理工作完成后，可以开始设置全屏背景图片。首先，在App.vue文件中添加全屏背景图片的容器，并且将前面创建的组件添加到该容器中。

<template>
  <div id="app">
    <div class="full-page">
      <BgImage />
      <!-- 其他组件 -->
    </div>
  </div>
</template>

<script>
import BgImage from '@/components/BgImage.vue'

export default {
  name: 'App',
  components: {
    BgImage
  }
}
</script>

<style>
.full-page {
  height: 100%;
}
</style>

接着，在全局样式中添加一些必要的样式，以确保背景图片正确显示。

body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

#app {
  height: 100%;
}

.full-page {
  position: relative;
  overflow: hidden;
}

三、自适应

为了保证背景图片在不同的设备上都能够自适应屏幕大小，需要在组件中添加一些代码，以确保背景图片的尺寸正确调整。

resizeImage() {
  const img = new Image()
  img.src = this.bgSrc
  img.onload = () => {
    const rate = img.width / img.height
    const screenRate = window.innerWidth / window.innerHeight
    const fullImg = document.querySelector('.full-img')
    if (rate < screenRate) {
      fullImg.style.width = 'auto'
      fullImg.style.height = '100%'
    } else {
      fullImg.style.width = '100%'
      fullImg.style.height = 'auto'
    }
  }
}

该代码使用JavaScript计算屏幕的宽高比，并将背景图片的宽高比与之进行比较。如果背景图片的宽高比小于屏幕的宽高比，则将图片的高度设置为100%，宽度自适应。反之亦然。

四、照片墙实现

如果需要在全屏背景图片上显示照片墙，则可以在组件中添加一些代码，以便实现该功能。

 <template>
  <div class="photo-wall">
    <img src="..." class="photo" />
    <img src="..." class="photo" />
    ...
  </div>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      const photos = document.querySelectorAll('.photo')
      for (let i = 0; i < photos.length; i++) {
        photos[i].style.left = `${i % 4 * 25}%`
        photos[i].style.top = `${Math.floor(i / 4) * 25}%`
      }
    })
  }
}
</script>

<style>
.photo-wall {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.photo {
  position: absolute;
  width: 25%;
  height: 25%;
}
</style>

以上代码通过计算每一张照片的位置，并将其设置为绝对位置，从而实现了照片墙的效果。

五、结语

通过以上几个方面的讲解，相信大家已经能够轻松地实现Vue全屏背景图片的效果了。希望本篇文章对大家有所帮助。

原创文章，作者：XCUMY，如若转载，请注明出处：https://www.506064.com/n/368273.html