Bootstrap Carousel 推送和拉取内容答案

【问题标题】：Bootstrap Carousel Pushing and Pulling ContentBootstrap Carousel 推送和拉取内容
【发布时间】：2016-06-28 20:01:39
【问题描述】：

我的引导轮播出现了一些问题。当前在其中的图像大小不同，图像之间的切换会推送和拉取页面的内容。我想要一个静态高度，并让图片在保持纵横比的同时填充静态高度。我在这里哪里出错了？

这是来自轮播的代码：

    <header id="main_carousel" class="carousel slide">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#main_carousel" data-slide-to="0" class="active"></li>
        <li data-target="#main_carousel" data-slide-to="1" class=""></li>
      </ol>
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="center-block fill" style="background-color:#6A6A6A" src="sample_house_one.jpg" height="inherit" alt="First slide" >
          <div class="carousel-caption">
            <h3>Next Esate Sale</h3>
            <p>July 8th at 9:00 AM</p>
          </div>
        </div>
        <div class="item">
          <img class="center-block fill" style="background-color:#6A6A6A" src="Sample_house_two.jpg" height="inherit" alt="Second slide">
          <div class="carousel-caption">
            <h3>Congrats to the new owners</h3>
            <p>Winning bid olny $65,000!!!</p>
          </div>
      	</div>
       </div>
      <a class="left carousel-control" href="#main_carousel" 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="#main_carousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
      </a>	  
	</header>

这是我在轮播中使用的 css，其他一切都是标准的 Bootstrap 主题和 css：

html,
body {
    height: 360px;
}

.carousel {
    height: 360px;
}

.carousel-inner > .item img,
.carousel-inner > .item > a > img {
    min-height:500px;
    max-width: 100%;
}


.item,
.active,
.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;
}


footer {
    margin: 50px 0;
}

【问题讨论】：

标签： css twitter-bootstrap carousel

【解决方案1】：

在你的 img 标签上加上max-height: 500px，这样它就不会随着图片大小的不同而缩小或增长。

或者更好的是，去掉min-height，只定义height。如果您的图片裁剪异常，您可能需要使用background-image div 或在图像编辑程序中将它们裁剪为相同的大小和纵横比，以获得最简单的解决方案。由于您使用的是轮播，因此提前裁剪图像可能是最简单的解决方案。

您也可以只允许 div 溢出并隐藏滚动条，并使用flexbox 将图像定位在中间，使用align-items: center 均匀裁剪顶部和底部。

【讨论】：