如何让 Bootstrap 轮播 100% 适合屏幕？

Question

我想知道如何让 Bootstrap's Carousel example 中的旋转木马 100% 适合屏幕，而不是它现在的显示方式，它允许一些空白的圆形图像包含在主登陆页面中已加载。

Here's a simple illustration of what I'm trying to get working.

页面来源（相关位）：

<!-- 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（相关位）：

/* 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;
}

我知道手头的任务非常简单，而且我承认在过去一个小时左右我尝试修改 carousel.css 文件（更改各种高度位置、z-index 等）。值），但我似乎无法在不把事情搞砸的情况下调整大小。更具体地说，我尝试添加

Answer 1

轮播和轮播项目的高度是固定的。那么它显然会是那个大小。

试试这个

html,body{
   height:100%;
}
.carousel,.item,.active{
   height:100%;
 }
.carousel-inner{
    height:100%;
}

Look at this question for demo and more.

即使在更改后它也不起作用那么你可以在这里用这个替换你的轮播 DEMO

也可以通过 jquery 获取总高度 windows 并将其设置为轮播包装器和其他元素的相应高度。

$(document).ready(function(){
   var height = $(window).height();  //getting windows height
   jQuery('#myCarousel').css('height',height+'px');   //and setting height of carousel
});

Answer 2

在尝试 fiddle 使用 Bootstrap 网站上提供的当前版本的 carousel 后，我只是认为尝试为他们提供的代码找到解决方法会更麻烦大于它的价值。

所以，我找到了this example instead 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 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

/* 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，无论如何这个版本更容易阅读。感谢@K.C。寻求帮助！

Answer 3

聚会有点晚了……但我想应该是从来没有迟到过。

无论如何，我对此采取了不同的方法。

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:

<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>

希望对您有所帮助。

Answer 4

这是一个对我有用的简单解决方案。

将此 class 添加到 carousel-inner div 内的图片标签中。

CSS:

.carousel-img-width {
  width: 100%;
}

HTML:

<img src="img_url" alt="text" class="carousel-img-width">

Answer 5

我也有类似的需求，我发现下面的 bootstrap class 几乎可以完成工作。

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" >

:

Answer 6

可能是因为 bootstrap class 的媒体查询试图将最大宽度设置为较小的尺寸。您可以将自定义 class 应用于轮播并覆盖最大宽度以适应屏幕。

.custom-carousel {
  max-width:100%;
  width:100%;
}

HTML:

<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>

如何让 Bootstrap 轮播 100% 适合屏幕？

How to get Bootstrap Carousel to fit 100% to screen?

html

css

carousel

twitter-bootstrap