Bootstrap Vue Carousel 高度不适合全屏答案

【问题标题】：Bootstrap Vue Carousel height does not fit to full screenBootstrap Vue Carousel 高度不适合全屏
【发布时间】：2019-09-21 18:02:07
【问题描述】：

我正在使用 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>

桌面屏幕：

手机屏幕：

【问题讨论】：

你试过backround-size:cover;吗？或者你可以在你的css中尝试@media
@UdhayTitus 我还没有尝试过。也许你能帮忙？
您必须使用background-size:cover，它将适用于您的所有屏幕。或者创建你尝试过的 jsfiddle
嗨@UdhayTitus。我使用了 background-size: cover 并且它有效。但是，现在我想使用对象数组和 for 循环动态呈现组件。我已经发布了一个关于这个问题的新线程。 stackoverflow.com/questions/55980098/… 此外，这是我的 js 小提琴。 jsfiddle.net/Issaki1/40yf526z/10
在你的fiddle你需要怎样的背景图片？或者你可以应用动态css

标签： html vue.js bootstrap-4 carousel bootstrap-vue

【解决方案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>

【讨论】：

【解决方案2】：

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

我也遇到了同样的问题，我把img的样式设置成上面的代码就解决了！！

我希望这对你有所帮助，尽管你已经很久没有问过了。

【讨论】：