调整轮播引导程序 4

Posted 2023-03-05

【中文标题】调整轮播引导程序 4

【英文标题】：Resize carousel bootstrap 4

【发布时间】：2019-10-24 04:35:14

【问题描述】：

我无法调整轮播高度。我希望轮播不会使用图像高度，而是我决定的另一个高度，尝试了不同的 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" >
              <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/

【参考方案1】：

这似乎有效：

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

【参考方案2】：

简答：

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

完整答案：

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

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

其次，通常你应该在引导程序中设置width of carousel。它可以在这里看到：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，你应该参考一下。