引导程序中的轮播 - 覆盖整个div

Question

我在引导程序中遇到轮播问题。我创建了两个 div - 左边一个带有文本，右边一个带有轮播。我希望轮播能够适合它的 div，尽管其中的图像尺寸很大。

<div class="carousel-big">
      <div class="container">
          <div class="row">
          <article class="col-lg-6 article"></article>
          <article class="col-lg-6 carousell">
            <div id="main-slider" class="carousel slide" data-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img class="w-100" src="https://i.postimg.cc/SswsyHnj/pexels-photo.jpg" alt="image">
                  <div class="carousel-caption">
            
                  </div>
                </div>
                <div class="carousel-item">
                  <img class="w-100" src="https://i.postimg.cc/BvRsDH4V/pexels-photo-730896.jpg" alt="image">
                  <div class="carousel-caption">
            
                  </div>
                </div>
                <div class="carousel-item">
                  <img class="w-100" src="https://i.postimg.cc/sxrrHzBP/pexels-photo-1022158.jpg" alt="image">
                  <div class="carousel-caption">
            
                  </div>
                </div>
              </div>
              <a class="carousel-control-prev" href="#main-slider" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="carousel-control-next" href="#main-slider" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
          </article>
          </div>
      </div>
    </div>

和CSS

  .carousel-inner, .carousel-item {
    height: 100vh;
  }
  
  .carousel-item img {
    height: 100%;
    object-fit: cover;
  }

我只是想让轮播适合那个 div ;)

Answer 1

您缺少

width

值。当使用

object-fit

时，它需要知道它尝试计算的覆盖范围、适合度或比例等容器的大小

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

 .carousel-inner, .carousel-item {
    height: 100vh;
  }
  
  .carousel-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

<div class="carousel-big">
      <div class="container">
          <div class="row">
          <article class="col-lg-6 article"></article>
          <article class="col-lg-6 carousell">
            <div id="main-slider" class="carousel slide" data-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img class="w-100" src="https://i.postimg.cc/SswsyHnj/pexels-photo.jpg" alt="image">
                  <div class="carousel-caption">
            
                  </div>
                </div>
                <div class="carousel-item">
                  <img class="w-100" src="https://i.postimg.cc/BvRsDH4V/pexels-photo-730896.jpg" alt="image">
                  <div class="carousel-caption">
            
                  </div>
                </div>
                <div class="carousel-item">
                  <img class="w-100" src="https://i.postimg.cc/sxrrHzBP/pexels-photo-1022158.jpg" alt="image">
                  <div class="carousel-caption">
            
                  </div>
                </div>
              </div>
              <a class="carousel-control-prev" href="#main-slider" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="carousel-control-next" href="#main-slider" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
          </article>
          </div>
      </div>
    </div>