html - Bootstrap Vue Carousel 高度不适合全屏

Question

我正在使用 Bootstrap Vue 来创建我的轮播。轮播包含 3 张图像，允许用户循环浏览。我能够显示适合笔记本电脑屏幕尺寸高度和宽度的图像。但是，当我慢慢将屏幕尺寸缩小到移动设备时，高度不再足于屏幕。下面是我的代码和截图

更新:我仍然无法解决这个问题，有人能帮我吗？

<template>
  <div>
    <b-carousel
      id="carousel-1"
      v-model="slide"
      :interval="4000"
      controls
      indicators
      background="#ababab"
      style="text-shadow: 1px 1px 2px #333;"
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd"
    >
      <!-- Text slides with image -->
      <b-carousel-slide
        caption="First slide"
        text="Nulla vitae elit libero, a pharetra augue mollis interdum."
        img-src="https://source.unsplash.com/LAaSoL0LrYs/1920x1080"
      ></b-carousel-slide>

      <!-- Slides with custom text -->
      <b-carousel-slide img-src="https://source.unsplash.com/bF2vsubyHcQ/1920x1080">
        <h1>Hello world!</h1>
      </b-carousel-slide>

      <!-- Slides with image only -->
      <b-carousel-slide img-src="https://source.unsplash.com/szFUQoyvrxM/1920x1080"></b-carousel-slide>
    </b-carousel>

    <p class="mt-4">
      Slide #: {{ slide }}
      <br>
      Sliding: {{ sliding }}
    </p>
  </div>
</template>

<script>

export default {
  data() {
    return {
      slide: 0,
      sliding: null
    };
  },
  methods: {
    onSlideStart(slide) {
      this.sliding = true;
    },
    onSlideEnd(slide) {
      this.sliding = false;
    }
  }
};
</script>

桌面屏幕:

手机屏幕:

Answer 1

<b-carousel-slide v-for="(slide, index) in slides" :key="index">
   <template v-slot:img>
      <img
       class="d-block class-name"
       width="1024"
       :src="slide"
       alt="image slot">
    </template>
</b-carousel-slide>


<style>
.class-name {
   height:100vh;
 }
</style>