调整轮播大小 bootstrap 4

Question

我无法调整轮播高度。我希望轮播不会使用图像高度，而是我决定的另一个高度，尝试了不同的 css 规则但没有成功。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<section id="portfolio" class="page-section">
      <div id="reviews" class="container-fluid">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://images.pexels.com/photos/2409628/pexels-photo-2409628.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="...">
              <div class="carousel-caption d-none d-md-block">
                <h5>Title</h5>
                <p>Description</p>
              </div>
            </div>
          </div>
          <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>

有 JSFiddle 可以提供帮助。 https://jsfiddle.net/6bjom57s/

Answer 1

这似乎有效：

.carousel-item img {
  max-height: 500px; /* input your desired height here */
}

Answer 2

简答：

您忘记将 img-fluid 添加到您的图像中。另外，通常你应该设置轮播宽度，而不是高度。如果要设置它的高度，请参阅完整答案。

完整答案：

（您可以在此处查看工作代码：Fiddle）

首先，如果您希望它具有响应性，您应该将 .img-fluid 添加到轮播中的图像。

其次，通常你应该在bootstrap中设置轮播width。正如您在此处看到的那样，它可以正常工作：Fiddle（但仍然不完美。）

但是如果你想设置轮播的高度，你可以改变一些bootstrap样式：

.carousel-item,
.carousel-inner,
.carousel-inner img {
  height: 100%;
  width: auto;
}

.carousel-item {
  text-align: center;
}

然后你可以设置轮播的高度:

.carousel {
  height: 200px;
}

您可以在这里查看：Fiddle

这不会裁剪图像。如果您希望图像覆盖（并裁剪），您可以使用：

.carousel-inner img {
  width: 100%;
  height: auto;
}

你可以在这里看到：Fiddle

此外，您也可以使用媒体查询对其进行自定义。

最后，如果您还没有参考 jquery 和 bootstrap.js。

调整轮播大小 bootstrap 4

Resize carousel bootstrap 4

html

css

carousel

bootstrap-4