html - 全屏无滚动条图像轮播

Question

我有一个带有固定导航栏和粘性页脚的 Bootstrap 3.1.1 页面。

我需要在轮播中显示全屏(减去固定导航栏和粘性页脚)图像。裁剪可以从 x 和 y 两个方向进行，但图像的中心需要位于视口(viewport)的中心。

这是我现在的位置: Bootply

问题是我无法让轮播出现。 height: 100% 似乎不起作用。

首选仅 CSS 的解决方案，但我不介意一点点 javascript。

Answer 1

您可以将 img-responsive 类添加到您的图像中，留下您的代码:

<!-- Wrap all page content here -->
<div id="wrap">

  <!-- Fixed navbar -->
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>

  <!-- Begin page content -->
  <div class="container-fluid">

    <!-- Begin carousel -->
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-pause="false">
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img class="img-responsive" src="http://placehold.it/1600x1200/0000aa" alt="...">

      </div>
      <div class="item">
        <img class="img-responsive" src="http://placehold.it/2592x1944/00aa00" alt="...">

      </div>
      <div class="item">

        <img class="img-responsive" src="http://placehold.it/3264x2448/aa0000" alt="...">
      </div>
    </div>

  </div>
  </div>
</div>

<div id="footer">
  <div class="container">
    <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
  </div>
</div>

这将使您的图片表现得如您所愿，但采用您的方法，固定的页脚会留下一些空白。当然，这取决于您尝试实现的目标，但我认为您最好使用 position:relative 或 position:absolute 页脚，否则您将需要使用 JS 或 jQuery 进行一些测量。

您可以选择使用 vh length对于所有内容而不是 img 元素，让这些图像成为它们各自元素的背景，这样你就可以应用 background-size:cover 属性并成为一个快乐的露营者