Question

我正在使用twitter-bootstrap功能轮播作为滑块。基本上我的主页只是一个带导航栏和页脚的大滑块。我想知道是否有办法让滑块适合屏幕而不会拉伸图像？

更具体一点，我希望滑块适合Windows浏览器的宽度和高度，而不必牺牲我的图像宽高比。使用我当前的代码，滑块可以完美地适应屏幕，但是图像并没有调整它的自我，因为它试图保持纵横比

请参阅我的JSFiddle，了解发生了什么;我还粘贴了下面的代码。

HTML

            <!-- Wrapper for Slides -->
            <div class="carousel-inner">

                <!-- Slide 1 -->
                <div class="item active">
                    <img class="fill" src="https://s16.postimg.org/5qy7h0v2d/Desert.jpg" alt="" />
                    <div class="carousel-caption">
                      <h3>Chicago</h3>
                      <p>Thank you, Chicago - A night we won't forget.</p>
                    </div>
                </div>

                <div class="item">
                    <!-- Slide 2 -->
                    <img class="fill" src="https://s11.postimg.org/d7rsly7xb/Hydrangeas.jpg" alt=""  />
                    <div class="carousel-caption">
                    </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>
        </div>
    </div>

CSS

.carousel,
.item,
.active {
    height: 100%;
}

.carousel-inner {
    height: 100%;
}

.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

html, body {
      width: 100%;
      height: 100%;
    overflow: hidden;
}

.test {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: auto;
    width: auto;
}

Answer 1

在您的代码中使用此功能。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>
    
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="http://stuffpoint.com/apple/image/20832-apple-blue-apple.jpg" alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        <div class="item">
          <img src="https://static.pexels.com/photos/36487/above-adventure-aerial-air.jpg" alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        ...
      </div>
    
      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

Answer 2

如果其他人可能遇到同样的问题，我找到了修复滑块的方法。

我基本上在下面的链接下载了Materialise插件。所有信息都包含在他们的网站上，您只需按照javascrip，media下的全屏滑块的说明进行操作。

http://materializecss.com/

此处还有JSFiddle的更新版本，以防有人想查看并测试最终结果;我也通过了下面的代码。

<强> HTML

<div class="slider fullscreen">
  <ul class="slides">
    <li>
      <img src="https://unsplash.imgix.net/photo-1414924347000-9823c338079b?q=75&fm=jpg&s=0fa6db3cdc65e50c111575043fad4b5c"> <!-- random image -->
      <div class="caption center-align">
        <h3>This is our big Tagline!</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
    <li>
      <img src="https://ununsplash.imgix.net/photo-1414849424631-8b18529a81ca?q=75&fm=jpg&s=0e993004a2f3704e8f2ad5469315ccb7"> <!-- random image -->
      <div class="caption left-align">
        <h3>Left Aligned Caption</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
    <li>
      <img src="https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&fm=jpg&s=6a4fc66161293fc4a43a6ca6f073d1c5"> <!-- random image -->
      <div class="caption right-align">
        <h3>Right Aligned Caption</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
    <li>
      <img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
      <div class="caption center-align">
        <h3>This is our big Tagline!</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
  </ul>
</div>

<强> JAVASCRIPT

  $(document).ready(function(){
    $('.slider').slider({full_width: true});
  });

Answer 3

使用!important：

.fill {
    width: 100%;
    height: 100%!important;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

https://jsfiddle.net/grnsyx0x/1/

Bootstrap carousel适合屏幕宽度和高度

3 个答案: