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

Question

У меня есть карусель с изображениями.Но изображения растянуты.Кто-нибудь может мне помочь, чтобы изображения не растягивались?

вот мой код:

<div class="carousel-inner">
    <div class="carousel-item active col-xs-12 col-sm-12">
        <img src="/images/winkelstufe.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. Tempore, quis!</p>
        </div>
    </div>

my css:

.carousel-item {
  height: 32rem;
}

.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  height: 32rem; 
  display: block;
}
.carousel {
  margin-bottom: 4rem;
  position: relative;
}
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

Может ли кто-нибудь помочь мне, что делать, если изображения не отображаются растянутыми?

Answer 1

у вас есть класс w-100 на изображении, который устанавливает width: 100% - удалите этот класс.

У вас также есть класс d-block на изображении, который устанавливает display:block, но вы 'Мы также установили такое же правило в вашем CSS.Вы также можете удалить этот класс, поскольку он ничего не делает для вас.

Также удалите классы col-xs-12 col-sm-12 из carousel-item.Эти col-* классы должны применяться только к столбцам, которые являются прямыми потомками <div class="row">, а это не так.