最外層的盒子是相對定位，但是高度是零，怎么才能讓外面這個盒子能有圖片的高度呢？

這是這個輪播圖的html代碼。

<template>
    <div>
      <transition-group tag='ul' :name="name" class="scroll-div">
        <li v-for="(img,index) in imgs" v-show="index === mark" :key="index">
          <a :href='img.url'>
            <img :src="img.picUrl">
          </a>
        </li>
      </transition-group>
    </div>
</template>
<script>
import axios from "axios";
import { setInterval } from "timers";
export default {
  data() {
    return {
      mark: 0,
      imgs: [],
      name:''
    };
  },
  methods: {
    getImgs() {
      axios.get("http://localhost:3000/banner").then(res => {
        console.log(res.data.banners);
        this.imgs = res.data.banners;
      });
    },
    autoplay() {
      this.mark++;
      console.log(this.mark);
      if (this.mark === 3) {
        this.mark = 0;
      }
    },
    play() {
      setInterval(this.autoplay, 3000);
    }
  },
  async created() {
    await this.getImgs();
    this.name = image;
  },
  mounted() {
    this.play();
  }
};
</script>

<style lang="scss" scoped>
.scroll-div {
  width: 100%;
  position: relative;
  li {
    width: 100%;
    position: absolute;
    img {
      display: block;
      width: 100%;
    }
  }
}
.image-enter-to {
  transition: all 1s ease;
  transform: translateX(0);
}
.image-leave-active {
  transition: all 1s ease;
  transform: translateX(-100%);
}
.image-enter {
  transform: translateX(100%);
}
.image-leave {
  transform: translateX(0);
}
</style>

imgs 這個數(shù)據(jù)是我從本地服務(wù)器取回的。

之前的問題是因為圖片是異步加載的，teansition-group 是先加載出來的，所以出現(xiàn)了一段空白的內(nèi)容。