The outermost box is relatively positioned, but the height is zero. How can we make the box outside have the height of a picture?

the outermost box is relatively positioned, but the height is zero. How can we make the outer box have the height of a picture?

this is the html code for this broadcast graph.

<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.markPP;
      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 is the data I retrieved from the local server.

< hr > The previous problem with

is that the picture is loaded asynchronously and the teansition-group is loaded first, so there is a blank piece of content.

Mar.24,2021

by default translateX should be a

equal to 0.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b2c329-e044.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b2c329-e044.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?