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

【问题标题】：Images not aligning properly in grid - Bootstrap 4.0图像在网格中未正确对齐 - Bootstrap 4.0
【发布时间】：2019-01-17 10:06:05
【问题描述】：

我正在做一个迷你项目，使用 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

我只需要一些关于如何做到这一点的指导。

图片如下：

【问题讨论】：

上面两张图片高度一样吗？

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

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

我还意识到，从您预期的图像来看，前 2 张图片是自下而上显示的，而最后一张是自上而下显示的。

这些点让我想使用这些图像作为这些列的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/

【讨论】：