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

Вам нужно на изображении:

height:100%;
max-width:100%