vue 背景图片自适应大小

在 Vue 中设置背景图片自适应大小，可以通过使用 `background-size` 属性来实现。设置 `background-size` 为 `cover`，则背景图片会被缩放以填充整个容器，并保持其宽高比例不变。如果设置 `background-size` 为 `contain`，则背景图片会被缩放以适应容器大小，并保持其宽高比例不变。

示例代码如下：

<template>
  <div class="container" :style="{ backgroundImage: `url(${imageUrl})`, backgroundSize: 'cover' }">
    <!-- 这里是容器中的内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg' // 背景图片的 URL
    }
  }
}
</script>

<style>
.container {
  width: 100%; /* 容器宽度 */
  height: 500px; /* 容器高度 */
}
</style>