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%), и я хотел бы, чтобы они были 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;
}