图像在网格中未正确对齐-Bootstrap 4.0

Question

我正在一个小型项目中使用Bootstrap 4重新创建网站。我需要的部分是网格格式的三个图像，顶部两个，底部一个。顶部的两个图像应按高度均匀排列（而不是宽度，右侧的图像较大），如下图所示：

请注意，它们在底部（它们甚至在顶部）是多么均匀。

现在这是我的样子：

看看左边的图像看起来比右边的图像略高。

这是我用于该部分的代码：

   <div class="row justify-content-center">
      <div class="col-md-4">
        <img src="assets/home_seasonal_1.jpg" class="img-fluid" alt="Responsive image" >
      </div>
       <div class="col-md-6">
          <img src="assets/home_seasonal_2.jpg" class="img-fluid" alt="Responsive image">
        </div>
      </div>
      <br>
      <div class="row justify-content-center">
        <div class="col-md-10">
          <img src="assets/home_seasonal_3.jpg" class="img-fluid" alt="Responsive image">
        </div>
      </div>

我尝试过使用不同的列，但到目前为止没有任何效果。目标是不修改CSS而是仅使用引导程序来执行此操作。

这是我正在使用的引导程序版本：

  

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css

我只需要一些有关如何实现这一目标的指导。

以下是图像：

Answer 1

如果您查看.img-fluid，它将最大宽度设置为100％，高度自动设置。这意味着，如果包含图像的框很窄，则图像可能会按比例缩小，高度也将按比例缩小。

我还从您期望的图像中意识到，前2张图片从下至上显示，而最后1张图片从上至下显示。

这些要点让我想将这些图像用作这些列的background。

结构

<div class="container">
    <div class="row justify-content-center">
        <!-- assets/home_seasonal_1.jpg -->
        <div class="col-md-4" style="background: url('https://i.stack.imgur.com/A5PIq.jpg') center bottom /cover no-repeat"></div>
        <!-- assets/home_seasonal_2.jpg -->
        <div class="col-md-6" style="background: url('https://i.stack.imgur.com/zVUvf.jpg') center bottom/cover no-repeat"></div>
    </div>
    <div class="row justify-content-center">
        <!-- assets/home_seasonal_3.jpg -->
        <div class="col-md-10" style="background: url('https://i.stack.imgur.com/xhMX6.jpg') center top/cover no-repeat"></div>
    </div> 
</div>

样式

我在这里很懒惰以这种方式设置样式，但是您可以使用内联CSS为这些列设置不同的样式。而且我在这里使用白色边框来达到目的。

.row {
    height: 12rem;
}

[class*="col-md"] {
    border: 2px solid #fff;
}

结果

大声笑看起来几乎与您的预期结果相同！

小提琴： http://jsfiddle.net/aq9Laaew/144953/