Bootstrap Vue轮播高度不适合全屏 [英] Bootstrap Vue Carousel height does not fit to full screen

问题描述

我正在使用Bootstrap Vue创建轮播.轮播中包含3张图片，可让用户循环浏览.我能够显示适合笔记本电脑屏幕尺寸的高度和宽度的图像.但是，随着我逐渐将屏幕尺寸减小到可移动的高度，屏幕的高度不再能支撑屏幕了.下面是我的代码和屏幕截图

I am using Bootstrap Vue to create my carousel. The carousel contains 3 images that allow users to cycle through. I am able to display the images that fit the height and width of my laptop screen size. However, as I slowly reduce the screen size to mobile, the height does not feet the screen anymore. Below are my codes and screenshots

更新:我仍然无法解决此问题，有人在这里吗?

Update: I still cannot solve this issue, can anyone here me?

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

桌面屏幕:

手机屏幕:

推荐答案

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

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

I also encountered the same problem ,and I set the style of img to the above code then problem solved!!

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

I hope this helps you although it's been a long time since you asked.

这篇关于Bootstrap Vue轮播高度不适合全屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！