时间戳

首页 > 解决方案 > 为什么 Bootstrap 4 轮播自动裁剪图像的高度？

css - 为什么 Bootstrap 4 轮播自动裁剪图像的高度？

问题描述

我正在使用 Bootstrap 4 轮播，我需要轮播显示 image 的完整高度。

我不知道为什么 boostrap 会降低它的高度

尺寸为 1920 x 700，轮播调整图像 1900 x 595

我在 curvy-slider (wordpress) 中看到了相同的图像，而这个插件不这样做。

<div id="carousel-area">
    <div id="carousel-slider" class=" slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="img-responsive" src="/data/1.jpg" alt="" >
            </div>
        </div>
    </div>
</div>

有人可以帮助我吗？

标签： cssbootstrap-4carousel

解决方案

Bootstrap 应该适应不同高度的图像，除非在某处为轮播设置了特定的高度。

#myCarousel img {
  width: auto;
  height: 225px;
  max-height: 225px;
}

从：

https://forums.adobe.com/thread/2413998

你可以在这里看到：

https://bootstrapcreative.com/create-full-width-bootstrap-4-responsive-carousel/

推荐阅读