Bootstrap Carousel 幻灯片（固定高度但保持图像中心顶部）答案

【问题标题】：Bootstrap Carousel slideshow (fixed height but keep image center top)Bootstrap Carousel 幻灯片（固定高度但保持图像中心顶部）
【发布时间】：2020-06-02 00:55:00
【问题描述】：

我有以下代码：

    <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="assets/slideshowimage.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="assets/slideshowimage.jpg" class="d-block w-100" alt="...">
    </div>

  </div>
</div>

（使用的图像为 1900 X 305 像素）

代码有效，但我需要在调整大小时保持图像高度相同。在调整屏幕大小时，图像高度会随着图像大小的调整而降低。

理想情况下，我需要它充当背景图像（带有“封面”和“中心顶部”），这样图像高度保持不变，并且随着浏览器调整大小，图像只会在左右两侧被裁剪。

使用引导程序 4.5

我尝试使用背景图片设置轮播项目，但这似乎不起作用。

有人能指点我正确的方向吗？

提前感谢您的帮助

【问题讨论】：

标签： bootstrap-4

【解决方案1】：

d-block w-100 使图像成为并因此调整大小 100%。您必须覆盖 css 才能实现。

请注意，您应该更喜欢在自己的 app.css 文件中覆盖它，而不是在引导程序文件中。

见文档：https://getbootstrap.com/docs/4.0/utilities/sizing/

例如 app.css

.d-block w-100 {

    width: 10vw;

}

【讨论】：