изображения в карусели не подходят

Question

Я использую Bootstrap 4. Там у меня есть карусель с картинкой. Изображения продолжают отображаться слишком большими и похожими на увеличенные. Иди в чем проблема.

Вот мой HTML-код:

<div class="carousel-inner">
    <div class="carousel-item active col-xs-12 col-sm-12">
        <img src="/images/holz_5.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
            <h1>Lorem</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, minima.</p>
        </div>
    </div>
    <div class="carousel-item col-xs-12 col-sm-12">
        <img src="/images/holz_6.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
            <h1>Lorem</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, minima</p>
        </div>
    </div>
    <div class="carousel-item col-xs-12 col-sm-12">
        <img src="/images/holz_4.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
            <h1>Lorem</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, minima</p>
        </div>
    </div>
</div>

Код CSS:

.carousel {
  margin-bottom: 4rem;
  position: relative;

}

.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

.carousel-inner img {  
  position: absolute;
  top: 0;
  left: 0;
  height: 32rem;
  object-fit: cover!important;
  display: block; 
}

.carousel-item {
  height: 32rem;
}

это выглядит так:

он слишком увеличен.

* +1012 *

оригинальная картинка выглядит так:

Может кто-нибудь помочь мне решить его проблему?

Answer 1

Я считаю, что проблема здесь:

 .carousel-inner img {  
  position: absolute;
  top: 0;
  left: 0;
  height: 32rem;
  object-fit: cover!important;
  display: block; 
}

Попробуйте изменить подгонку объекта и высоту следующим образом:

.carousel-inner img {  
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  object-fit: contain !important;
  display: block; 
}

Надеюсь, что поможет.