【问题标题】: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;
    
    }
    

    【讨论】:

      猜你喜欢
      • 2016-07-11
      • 2014-01-18
      • 1970-01-01
      • 2015-10-15
      • 2013-02-05
      • 2015-07-17
      • 2021-04-15
      • 2014-05-04
      • 2016-09-26
      相关资源
      最近更新 更多