Bootstrap Carousel 高度调整为浏览器高度

Question

我正在尝试将我的 Bootstrap 滑块高度调整为浏览器屏幕高度，但无法正确调整。

我知道这个问题已经在 StackOverflow 上提出过，但没有找到更好的解决方案。

我通过设置 height = 85vh 找到了一种解决方案，但滑块图像在大屏幕上看起来被拉伸了。

我附上了下面的滑块截图，

我还在我当前的代码下面添加了sn-p

$('.carousel-1').carousel();

 .carousel {
            left: 0px;
            height: 85vh;
        }

        .carousel-inner>.item {
            height: 85vh;
        }
        .sliderBG>.item>img {
            height: 85vh;
        }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="carousel-1" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner sliderBG">
                <div class="item active"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="width:100%;">
                   
                </div>
                <div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="width:100%;">
                    
                </div>
                <div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="width:100%;">
                   
                </div>
                <div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="width:100%;">
                   
                </div>
            </div>

            <a class="carousel-control left" href="#carousel-1" data-slide="prev">
                <i class="fa fa-angle-left" aria-hidden="true"></i>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control right" href="#carousel-1" data-slide="next">
                <i class="fa fa-angle-right" aria-hidden="true"></i>
                <span class="sr-only">Next</span>
            </a>
        </div>

Answer 1

您可以只更改您的 CSS 部分并获得乐趣..！

.sliderBG>.item>img {
    display: block;
    height: 100%;
    max-width: inherit;
    width: auto !important;
    margin: 0 auto;
}

Answer 2

那是因为你是trying to make height responsive but at the same time stretching the image with respect to its width 而不是身高。

你能做什么？

你可以设置height to 100%而不是滑块中图像的宽度，并设置margin to auto使其居中对齐；

$('.carousel-1').carousel();

.carousel {
  left: 0px;
  height: 85vh;
}

.carousel-inner{
  height: 100%;
}

.carousel-inner .item{
  height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="carousel-1" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner sliderBG">
    <div class="item active"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="height:100%;margin:0 auto;">

    </div>
    <div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="height:100%;margin:0 auto;">

    </div>
    <div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="height:100%;margin:0 auto;">

    </div>
    <div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="height:100%;margin:0 auto;">

    </div>
  </div>

  <a class="carousel-control left" href="#carousel-1" data-slide="prev">
    <i class="fa fa-angle-left" aria-hidden="true"></i>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control right" href="#carousel-1" data-slide="next">
    <i class="fa fa-angle-right" aria-hidden="true"></i>
    <span class="sr-only">Next</span>
  </a>
</div>

但如果您想填充整个幻灯片并且不介意剪掉图像，那么：

$('.carousel-1').carousel();

.carousel {
  left: 0px;
  height: 85vh;
}

.carousel-inner{
  height: 100%;
}

.carousel-inner item img{
height:100%;margin:0 auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="carousel-1" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner sliderBG">
    <div class="item active"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="">

    </div>
    <div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="">

    </div>
    <div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="">

    </div>
    <div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties">

    </div>
  </div>

  <a class="carousel-control left" href="#carousel-1" data-slide="prev">
    <i class="fa fa-angle-left" aria-hidden="true"></i>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control right" href="#carousel-1" data-slide="next">
    <i class="fa fa-angle-right" aria-hidden="true"></i>
    <span class="sr-only">Next</span>
  </a>
</div>