Question

我的引导旋转木马有些问题。当前在其中的图像是不同的大小，并且图像之间的切换推动和拉取页面的内容。我希望静态高度和图片填充静态高度，同时保持纵横比。我在哪里错了？

以下是Carousel的代码：

＆＃13;

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

＆＃13;

这是我用旋转木马的CSS，其他一切都是标准的Bootstrap主题和css：

＆＃13;

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

＆＃13;

Answer 1

在您的img标记上放置一个max-height: 500px，这样它就可以缩小或增长不同的图片尺寸。

或者更好的是，摆脱min-height并定义height。如果您的图片奇怪地裁剪，您可能需要使用background-image div或在图像编辑程序中将它们裁剪为相同的大小和宽高比，以便进行最简单的处理。由于您使用了旋转木马，提前裁剪图像可能是最简单的解决方案。

您也可以让div溢出并隐藏滚动条，然后使用flexbox将图像放在中间位置align-items: center以均匀地裁剪顶部和底部。

Bootstrap Carousel推送和拉动内容

1 个答案: