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

简短答案：

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

完整答案：

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

首先，如果要使其具有响应性，则应将.img-fluid添加到轮播中的图像中。

第二，通常您应该在引导程序中设置轮播的width。您可以在这里看到它的工作原理：Fiddle（但仍然不完美。）

但是，如果您要设置轮播的高度，则可以更改一些引导程序样式：

.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。

Answer 2

这似乎可行：

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

调整大小轮播引导程序4

2 个答案: