Question

我有一个Bootstrap 3.1.1页面，其中包含固定的导航栏和粘性页脚。

我需要在旋转木马中显示全屏（减去固定的导航栏和粘性页脚）图像。裁剪可以是x和y，但图像的中心需要位于视口的中心。

这就是我现在所处的位置： Bootply

问题是我无法显示轮播。 heght: 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使用{{3}}代替img元素，将这些图片作为各自项目的背景，这样您就可以应用background-size:cover属性并成为快乐露营者

Answer 2

如果你不想滚动你应该使用overflow: hidden，但是你的图像显示没有任何裁剪是不可能的，因为你的图像有一个固定的大小，并且有很多不同的设备有不同的视图端口。这只是你想要裁剪的问题。（宽度或高度）如果要从宽度裁剪，则应对该图像使用height: 100%，如果要裁剪宽度，则应使用img-responsive类。

我猜你的情况下你应该将图像的高度添加100％，隐藏身体溢出并使图像居中margin: 0px auto;

全屏无滚动条图像轮播

2 个答案: