Bootstrap Carousel 和 <img> 标签与对象配合和对象位置不起作用

Question

我有以下轮播：

  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      ...
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="Images/pastry3.jpg" alt="First slide">
      </div>
    </div>
      ...
  </div>

我有以下 CSS：

.carousel {
    width: 100%;
    height: 100%;
}

    .carousel .carousel-inner, .carousel .carousel-item {
        width: 100%;
        height: 100%;
    }

    .carousel-item img {
        object-fit: cover;
        object-position: 50% 50%;
    }

我的图像比屏幕大得多（宽度：100% 和高度：100%），我希望它们能够img在位于屏幕中心时保持其纵横比，因此object-fit: cover;和object-position: 50% 50%，但它不工作。为什么？

我正在尝试制作一个全屏练习主页，其中包含不同幻灯片中不同文本区域的滑动图像/视频。

Answer 1

我也遇到了同样的问题，直到我这样做：

.carousel-item img {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: 50% 50%;
}

我希望这可以帮助别人 ：）