Html 如何让 Bootstrap Carousel 100% 适合屏幕？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30930079/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get Bootstrap Carousel to fit 100% to screen?
提问by youngrrrr
I was wondering how to get the carousel in Bootstrap's Carousel exampleto fit 100% to screen, as opposed to the way it's displaying now which allows some blank circular images to be included in the main landing page when it is loaded.
我想知道如何让Bootstrap 的 Carousel 示例中的 carousel 100% 适合屏幕，而不是它现在显示的方式，它允许在加载时将一些空白圆形图像包含在主登录页面中。
Here's a simple illustration of what I'm trying to get working.
page source (relevant bit):
页面源（相关位）：
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
carousel.css (relevant bit):
carousel.css（相关位）：
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
I know the task at hand is pretty simple, and I admit that I have tried tinkering around with the carousel.css file for the past hour or so (changing various height position, z-index, etc. values), but I just can't seem to get the resizing to work without majorly screwing things up. More specifically, I tried adding
我知道手头的任务非常简单，我承认我在过去一个小时左右尝试修改 carousel.css 文件（更改各种高度位置、z-index 等值），但我只能似乎无法在不把事情搞砸的情况下调整大小。更具体地说，我尝试添加
采纳答案by youngrrrr
After trying to fiddle around with the current version of carousel provided on Bootstrap's website, I just figured that trying to find a work-around for their provided code would just be more trouble than it's worth.
在尝试摆弄 Bootstrap 网站上提供的当前版本的 carousel 之后，我只是想为他们提供的代码寻找解决方法只会比它的价值更麻烦。
So, I found this exampleinstead and just replaced the carousel HTML with the one provided by their source - starting at the 'header'and replaced the carousel portion in the carousel.css with their full-slider.css part.
所以，我找到了这个例子，只是用他们的源代码提供的替换了轮播 HTML - 从“标题”开始，并用他们的 full-slider.css 部分替换了 carousel.css 中的轮播部分。
Final code looks something like this:
最终代码如下所示：
HTML
HTML
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
<div class="carousel-caption">
<h2>Caption 3</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
CSS
CSS
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
.carousel,
.item,
.active {
height: 100%;
margin-bottom: 60px;
}
.carousel-inner {
height: 100%;
}
/* Background images are set within the HTML using inline CSS, not here */
.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
IMO, this version is much easier to read anyways. Thanks to @K.C. for the help!
IMO，无论如何，这个版本更容易阅读。感谢@KC 的帮助！
回答by Suman K.C
You have fixed height for the carousel and carousel items. Then it obviously will be of that size.
旋转木马和旋转木马项目的高度是固定的。那么它显然会是那个大小。
Try this
尝试这个
html,body{
height:100%;
}
.carousel,.item,.active{
height:100%;
}
.carousel-inner{
height:100%;
}
Look at this question for demo and more.
Even after changing it won't work then you can replace your carousel with this one here DEMO
即使更改后它也不起作用，那么您可以在此处用这个DEMO替换您的轮播
Also via jqueryyou can first get the windows total height and set it to the height of your carousel wrapper and other elements as accordingly.
同样通过 jquery，您可以首先获取窗口总高度并将其设置为轮播包装器和其他元素的高度。
$(document).ready(function(){
var height = $(window).height(); //getting windows height
jQuery('#myCarousel').css('height',height+'px'); //and setting height of carousel
});
回答by Chris
Kinda late to the party... but rather late then never I suppose.
参加聚会有点晚了……但我想应该是迟到了。
Anyways, I took a different approach to this.
无论如何，我对此采取了不同的方法。
CSS:
CSS：
html, body, .carousel, .carousel-inner, .carousel-inner .item {
height: 100%;
}
.Outside {
background-image: url("../Your/Image/Path/Outside.jpg");
z-index: -2;
display: block;
position: fixed;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
HTML:
HTML：
<div id="carousel1" class="carousel carousel-fade" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="Outside"></div>
<div class="carousel-caption">
</div>
</div>
</div>
</div>
Hope this helps.
希望这可以帮助。
回答by Shubhav Chittal
I had a similar requirement, and I found that below bootstrap class pretty much does the job.
我有一个类似的要求，我发现下面的引导类几乎可以完成这项工作。
class="d-block w-100 h-100"
class="d-block w-100 h-100"
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQMueyisr8wYKRW8wS4G19HmwvGg_T_j5U3LgBfSPmdUc8aq-AX" class="d-block w-100 h-100" >:
：
回答by Da Scientist
It may be because of the media queries of the bootstrap class trying to set the max-width to a smaller size. You can apply a custom class to the carousel and override the max-width to fit the screen.
这可能是因为引导类的媒体查询试图将 max-width 设置为较小的尺寸。您可以将自定义类应用于轮播并覆盖 max-width 以适合屏幕。
.custom-carousel {
max-width:100%;
width:100%;
}<div id="carousel1" class="carousel carousel-fade custom-carousel" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="Outside"></div>
<div class="carousel-caption">
</div>
</div>
</div>
</div>回答by Vigneshwaran Sivalingam
Here's an easy solution that worked for me.
这是一个对我有用的简单解决方案。
Add this class to your image tag inside carousel-inner div.
将此类添加到 carousel-inner div 内的图像标签。
CSS:
CSS：
.carousel-img-width {
width: 100%;
}
HTML:
HTML：
<img src="img_url" alt="text" class="carousel-img-width">
