html - Bootstrap 轮播 : remove bottom margin

Question

here's the site .如果将窗口大小调整为较小的尺寸。你会注意到有一个由

引起的底部边距/填充

.carousel-inner {
    background-color: #03324c;
}

我可以删除它，但指示器将不可见，并且底部会有一个空隙。我知道图像有不同的大小，我尝试调整大小，同样的问题。两天来我尝试了很多东西，但没有任何效果。

.carousel-inner {
    background-color: #03324c;
}
.carousel-inner img {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    opacity: 0.7;
    width: 100vw;
    height: auto;
    max-height: 100vh;
    bottom: 0;
}
.carousel-caption h3 {
    color: #fff !important;
}

Answer 1

你最好使用 background-image结合 background-size:cover在 .item 上元素。

例如，您的第一个元素将更改为此(只需删除 img 标签):

<div class="item" style="min-height: 710px;">
  <div class="carousel-caption">
    <h3>New York</h3>
    <p>The atmosphere in New York is lorem ipsum.</p>
  </div>
</div>

以及对应.item的样式元素将是这样的:

.item {
  background-image: url(images/medium/quote.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center; 
}