我正在尝试调整我的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>
答案 0 :(得分:0)
那是因为你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();
&#13;
.carousel {
left: 0px;
height: 85vh;
}
.carousel-inner{
height: 100%;
}
.carousel-inner .item{
height: 100%;
}
&#13;
<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>
&#13;
但是如果你想填写完整的幻灯片并且不介意剪掉图像,那么:
$('.carousel-1').carousel();
&#13;
.carousel {
left: 0px;
height: 85vh;
}
.carousel-inner{
height: 100%;
}
.carousel-inner item img{
height:100%;margin:0 auto;
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
您只能更改自己的CSS部分并获得乐趣..
.sliderBG>.item>img {
display: block;
height: 100%;
max-width: inherit;
width: auto !important;
margin: 0 auto;
}