Bootstrap 4 - 大图像旁边的两个小对齐图像

Question

我正在尝试使用Bootstrap 4来实现这一目标。

如图所示，无论内部图片的分辨率如何，我都需要两列高度相同的列。左边有一张大图，右边有一张小图片，有一些间隙与大图片完全对齐。

任何帮助都会非常感激！

到目前为止我的代码：

HTML：

            <div class="row">
            <div class="col-lg-6">

              <div class="imagebox">
              <img class="img-fluid" src="https://placehold.it/1000x1000" alt="">
              </div>

            </div>

            <div class="col-lg-6">
                  <div class="imagebox">
                  <img class="img-fluid" src="https://placehold.it/400x600" alt="">
                  </div>

                  <div class="spacer30"></div>

                  <div class="imagebox">
                  <img class="img-fluid" src="https://placehold.it/400x600" alt="">
                  </div>

            </div>                  
        </div>

CSS：

.imagebox{
    overflow: hidden;
    width: 100%;
    height: auto;
}

.spacer30{
    height:30px;
}

Answer 1

它应该是这样的。

（运行代码段并在整页中打开）

＆＃13;

＆＃13;

$(document).ready(function() {
    var loImage = $('#myHeightImage'),
        loSideImages = $('#sideImages');

    // http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached
    loImage.on("load", function() {
        loSideImages.height(loImage.height());
    });

    window.onresize = function(event) {
        loSideImages.height(loImage.height());
    };
});

＆＃13;

div.col-md-6 div {
  height: 50%;
  background-position: center;
  background-size: cover;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

<div class="container">
  <div class="row">
    <img src="http://lorempixel.com/1280/720/people" id="myHeightImage" class="col-md-6"/>
    <div id="sideImages" class="col-md-6">
      <div style="background-image: url(http://lorempixel.com/1280/720/animals)"></div>
      <div style="background-image: url(http://lorempixel.com/1280/720/nature)"></div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;