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

<style>
    .carousel-item img {
        height:100vh!important ;
    }
</style>

我也遇到了同样的问题，我将img的样式设置为上述代码，然后问题解决了！

我希望这对您有所帮助，尽管距您提出要求已经很长时间了。

Answer 2

<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>

Bootstrap Vue轮播高度不适合全屏

2 个答案: