引导轮播：删除底部边距答案

【问题标题】：Bootstrap carousel: remove bottom margin引导轮播：删除底部边距
【发布时间】：2021-10-19 07:03:08
【问题描述】：

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;
}

【问题讨论】：

您到底在寻找什么？您希望为指标显示边距吗？
@SamBattat 是的，我保留它，因为它使指标显示，这就是我需要它的全部
使所有图像的宽度和高度相同

标签： html css twitter-bootstrap twitter-bootstrap-3 carousel

【解决方案1】：

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

例如，您的第一个项目将更改为此（只需删除 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; 
}

【讨论】：

这种方法有什么优势？
您可以轻松缩放图像以填充容器空间，同时保持原始图像的比例。话虽这么说，当您使用不同大小的图像或图像比例与容器的比例有很大不同时，您固有地存在一些图像被截断的风险
我认为不是图像大小的问题，我认为是容器或指标导致填充
容器和指标都不是问题。您在img 下方看到的边距来自以下事实：img 宽度始终是容器的 100%，img 高度始终是自动的，这意味着它将保留原始比例。那么当容器显示的尺寸比img 的原始尺寸高时会发生什么？当然，img 必须比容器短，这是底部“边距”的来源。它实际上不是 CSS 边距 - 它只是没有被 img 填充的空间。

【解决方案2】：

@feihcism，我立即同意您的评论，然后我必须 100% 制作图像，无论其父级是什么，相信我。它有效

.carousel-item img {
    position: absolute;
    object-fit:cover;
    top: 0;
    left: 0;
    min-height: 100%; // I mean this!
}

【讨论】：