twitter-bootstrap Bootstrap 轮播全屏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16350902/
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
Bootstrap Carousel Full Screen
提问by Tyler B. Wear
I am trying to get the image in the bootstrap carousel to show full screen but haven't been able to figure it out, I've been working on this for awhile and am totally stuck. Right now I have just one image, but I will add more once it works...
我试图让引导程序轮播中的图像全屏显示，但一直无法弄清楚，我已经研究了一段时间并且完全卡住了。现在我只有一张图片，但是一旦它起作用我会添加更多...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Carousel Template · Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<style>
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
color: #5a5a5a;
height: 100%;
width: 100%;
min-height: 100%;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
margin-top: 20px;
}
.navbar-wrapper .navbar {
}
/* Remove border and change up box shadow for more contrast */
.navbar .navbar-inner {
border: 0;
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
-moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
/* Downsize the brand/project name a bit */
.navbar .brand {
padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
font-size: 16px;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
/* Navbar links: increase padding for taller navbar */
.navbar .nav > li > a {
padding: 15px 20px;
}
/* Offset the responsive button for proper vertical alignment */
.navbar .btn-navbar {
margin-top: 10px;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 0px;
}
.carousel .container {
position: relative;
z-index: 9;
}
.carousel .item {
height: 100%;
}
.carousel-inner {
overflow:hidden;
width: 100%;
min-height: 100%;
position:relative;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
.carousel-caption {
background-color: transparent;
position: static;
max-width: 550px;
padding: 0 20px;
margin-top: 200px;
}
.carousel-caption h1,
.carousel-caption .lead {
margin: 0;
line-height: 1.25;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.carousel-caption .btn {
margin-top: 10px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (max-width: 979px) {
.container.navbar-wrapper {
margin-bottom: 0;
width: auto;
}
.navbar-inner {
border-radius: 0;
margin: -20px 0;
}
.carousel img {
width: auto;
height: 500px;
}
.featurette {
height: auto;
padding: 0;
}
.featurette-image.pull-left,
.featurette-image.pull-right {
display: block;
float: none;
max-width: 40%;
margin: 0 auto 20px;
}
}
@media (max-width: 767px) {
.navbar-inner {
margin: -20px;
}
.carousel {
margin-left: -20px;
margin-right: -20px;
}
.carousel img {
height: 300px;
}
.carousel-caption {
width: 65%;
padding: 0 70px;
margin-top: 100px;
}
.carousel-caption h1 {
font-size: 30px;
}
.carousel-caption .lead,
.carousel-caption .btn {
font-size: 18px;
}
.marketing .span4 + .span4 {
margin-top: 40px;
}
.featurette-heading {
font-size: 30px;
}
.featurette .lead {
font-size: 18px;
line-height: 1.5;
}
}
</style>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<!-- NAVBAR
================================================== -->
<div class="navbar-wrapper">
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Treyca</a>
<!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="fluid.html">Beta</a></li>
<li><a href="#contact">Contact</a></li>
<!-- Read about Bootstrap dropdowns at http://twitter.github.com/bootstrap/javascript.html#dropdowns -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
</div> <!-- /.container -->
</div><!-- /.navbar-wrapper -->
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="../assets/img/examples/Bar-1.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p class="lead">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>
<a class="btn btn-large btn-primary" href="#">Sign up today</a>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
<p>© 2013 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
</footer>
</div><!-- /.carousel -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
<script>
!function ($) {
$(function(){
// carousel demo
$('#myCarousel').carousel()
})
}(window.jQuery)
</script>
<script src="../assets/js/holder/holder.js"></script>
<style>
body {
background-color: black;
color: #FFFFFF;
}
</style>
</body>
</html>
回答by Zim
Update Bootstrap 4
更新引导程序 4
Bootstrap 4 has utility classesthat make it easier to create a full screen carousel. For example, use the min-vh-100class on the carousel-itemcontent...
Bootstrap 4 具有实用程序类，可以更轻松地创建全屏轮播。例如，min-vh-100在carousel-item内容上使用类...
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner bg-info" role="listbox">
<div class="carousel-item active">
<div class="d-flex align-items-center justify-content-center min-vh-100">
<h1 class="display-1">ONE</h1>
</div>
</div>
</div>
</div>
This works to make the carousel items full screen, but carousel items that contain images or videos that have a specific size & aspect ratio require further consideration.
这可以使轮播项目全屏显示，但包含具有特定大小和纵横比的图像或视频的轮播项目需要进一步考虑。
Since the viewport h/w ratio is likely to be different than the image or video h/w ratio, usually background images or object-fitare commonly used to size images and videos to "full screen". For videos, use the Bootstrap responsive embed classesas needed for the video ratio (21:9, 19:9, etc...).
由于视口 h/w 比率可能与图像或视频 h/w 比率不同，通常背景图像或object-fit通常用于将图像和视频调整为“全屏”。对于视频，根据视频比例（21:9、19:9 等）的需要使用 Bootstrap响应嵌入类。
Also see: https://stackoverflow.com/a/58765043/171456
另见：https: //stackoverflow.com/a/58765043/171456
Original answer (Bootstrap 3)
原始答案（引导程序 3）
Make sure the img inside the carousel item is set to height and width 100%. You also have to make sure the carousel and any of the .item containers (html,body) are 100%...
确保轮播项目内的 img 设置为高度和宽度 100%。您还必须确保轮播和任何 .item 容器 (html,body) 是 100%...
html,body{height:100%;}
.carousel,.item,.active{height:100%;}
.carousel-inner{height:100%;}
Boostrap 3 Full Screen Carousel Demo
Here's an example for Bootstrap 3.x: http://www.codeply.com/go/2tVXo3mAtV
这是 Bootstrap 3.x 的示例：http: //www.codeply.com/go/2tVXo3mAtV
回答by Turbojohan
This is how I did it. This makes the images in the slideshow take up the full screen if it′s aspect ratio allows it, othervice it scales down.
我就是这样做的。如果纵横比允许，这会使幻灯片中的图像占据全屏，否则会缩小。
.carousel {
height: 100vh;
width: 100%;
overflow:hidden;
}
.carousel .carousel-inner {
height:100%;
}
To allways get a full screen slideshow, no matter screen aspect ratio, you can also use object-fit: (doesn′t work in IE or Edge)
为了始终获得全屏幻灯片，无论屏幕纵横比如何，您也可以使用 object-fit:（在 IE 或 Edge 中不起作用）
.carousel .carousel-inner img {
display:block;
object-fit: cover;
}
回答by Eric Watson
I found an answer on the startbootstrap.com. Try this code:
我在 startbootstrap.com 上找到了答案。试试这个代码：
CSS
CSS
html,
body {
height: 100%;
}
.carousel,
.item,
.active {
height: 100%;
}
.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;
}
footer {
margin: 50px 0;
}
HTML
HTML
<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>
回答by Razvan Zamfir
You can do it without forcing htmland bodyto me 100% height. Use view port height instead. And with mouse wheel controltoo.
你可以在不强迫的情况下做到这一点html，body对我来说是 100% 的高度。改用视口高度。还有鼠标滚轮控制。
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this,
args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
var slider = document.getElementById("demo");
var onScroll = debounce(function(direction) {
//console.log(direction);
if (direction == false) {
$('.carousel-control-next').click();
} else {
$('.carousel-control-prev').click();
}
}, 100, true);
slider.addEventListener("wheel", function(e) {
e.preventDefault();
var delta;
if (event.wheelDelta) {
delta = event.wheelDelta;
} else {
delta = -1 * event.deltaY;
}
onScroll(delta >= 0);
});.carousel-item {
height: 100vh;
background: #212121;
}
.carousel-control-next,
.carousel-control-prev {
width: 8% !important;
}
.carousel-item.active,
.carousel-item-left,
.carousel-item-right {
display: flex !important;
justify-content: center;
align-items: center;
}
.carousel-item h1 {
color: #fff;
font-size: 72px;
padding: 0 10%;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div id="demo" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<h1 class="display-1 text-center">Lorem ipsum dolor sit amet adipisicing</h1>
</div>
<div class="carousel-item">
<h1 class="display-1 text-center">Inventore omnis odio, dolore culpa atque?</h1>
</div>
<div class="carousel-item">
<h1 class="display-1 text-center">Lorem ipsum dolor sit</h1>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>回答by Comics Dealer
I'm had the same problem, and I tried with the answers above, but I wanted something more thin, then I tried to change one by one opsions, and discover that we just need to add
我遇到了同样的问题，我尝试了上面的答案，但我想要更薄的东西，然后我尝试一一更改选项，发现我们只需要添加
.carousel {
height: 100%;
}
