html - 我想使用 Bootstrap 制作一个带有 1 张水平图片和(下一张幻灯片)2 张垂直图片的轮播。但我不能让他们一样高

Question

<div class="container">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>


  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">

    <div class="item active">
        <img src="big1.JPG" alt="...">
    </div>

    <div class="item">
        <div class="row">
             <div class="col-xs-6"><img src="vertical2.JPG" class="img-responsive"></div>
             <div class="col-xs-6"><img src="vertical2.JPG" class="img-responsive"></div>
        </div>
    </div>

  </div>
    </div>

这是我的代码，我的垂直和水平图片具有相同的高度(256 px)，但垂直图片看起来有点长。我试图通过以下方式解决此问题:向容器元素和高度添加 256px 高度:100%；到我的垂直图片，但它没有用。我将非常感谢您的建议。谢谢。

Answer 1

1. 您必须确保您的垂直图像具有与大图像相同的高度和 50% 的宽度。
2. 您必须消除垂直图像之间的间隙。

CSS:

.item .row {
  margin: 0;
}
.item [class*="col"] {
  padding: 0;
}

CODEPEN

如果您有不同宽度的图像，则必须为轮播中的所有图像设置固定高度。

.carousel .item img {
  height: 200px;
}