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

Question

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

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

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

我附上下面的滑块截图，

我还在我当前的代码片段下面添加了

$('.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>