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

Question

我正在使用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时，浏览器四舍五入，图像的高度变得不同（一个401px，另一个403px），结果导致布局中断。看到图像。

Answer 1

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

 <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>

请看一下-也许它会按您的预期工作：）

Answer 2

这就是解决我问题的方法

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