图像在轮播中拉伸

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>

我的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">的直接子级的列，而并非如此。