CSS网格图像在较小尺寸和图像高度上的缩放问题

我正在用bootstrap 4制作这样的不均匀网格图像

<div class="col-sm-12 col-md-7 col-lg-7">
    <img src="images/dummy_image1.png" class="img-fluid">
</div>
<div class="col-sm-12 col-md-5 col-lg-5">
    <img src="images/dummy_image2.png" class="img-fluid">
</div>
<div class="col-sm-12 col-md-5 col-lg-5">
    <img src="images/dummy_image3.png" class="img-fluid">
</div>
<div class="col-sm-12 col-md-7 col-lg-7">
    <img src="images/dummy_image4.png" class="img-fluid">
</div>

图像的高度都相等，问题是当调整大小为MD时，例如，浏览器正在取整，图像高度变得不同（一个401像素，另一个403像素），因此它会阻止布局。 请看图片。

---

我想您的标记应该类似于：

 <div class="container">
        <div class="row">
            <div class="col-sm-4 col-lg-5"></div>
            <div class="col-sm-2 col-lg-3"></div>
        </div>
        <div class="row">
            <div class="col-sm-2 col-lg-3"></div>
            <div class="col-sm-4 col-lg-5"></div>
        </div>

    </div>

---

请看一看-也许它会像您预期的那样工作：）

这就是我解决问题的方法

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:  flex;
  flex-wrap: wrap;
}

---

将.col放入.row类怎么样？[2.col here][2.col here]事实上，这些是单独的行，应该按这样的方式进行结构。使用图像的最大高度，或者您也可以使用bootstrap d-flex类来创建网格。或者使用两个div.row和它们的列来制作网格。有一个div容器和类row，不是说父div中已经有容器和行类。将它们拆分为两个div可能会有所帮助，但不幸的是无法做到这一点，因为内容是动态创建的。