html - Bootstrap Carousel 和带有对象匹配和对象位置的标签不起作用

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%），我希望它们是imgs 可以在屏幕中心保持纵横比，因此object-fit: cover;和object-position: 50% 50%，但它不工作。为什么？

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

Answer 1

在我这样做之前，我也遇到了同样的问题：

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

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

Answer 2

您需要在图像中：

height:100%;
max-width:100%

Answer 3

.carousel-item img {
  object-fit: cover;
  object-position: center;
  height: 100%;
  overflow: hidden;
}