css - Bootstrap Carousel 推送和拉取内容

Question

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

这是轮播的代码:

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

Answer 1

在您的 img 标签上放置一个 max-height: 500px，这样它就不会随着图片尺寸的不同而缩小或增大。

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

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