弹性盒网格中的图像

如何解决弹性盒网格中的图像

我试图创建一个带有两列 flexbox 的图像网格。在第一列中，我放置了一个图像（600x600px），在第二列中，我为每行放置了 4 个图像（300x300px）2。

在第二列中，图像之间有一些空间，导致结果交错。 这是我正在测试的代码，如何删除图像之间的空白？ 感谢您的帮助

/* ! Grid System */
.grid { margin: 0 auto; max-width: 1200px; display: flex; flex-flow: row; flex-wrap: nowrap;}
.grid-wrap{flex-wrap: wrap;}
.grid-horizontal{display: flex; flex-flow: row; flex-wrap: nowrap; border: solid 1px yellow; }
.grid--center{justify-content: center;}
.col{ flex: 1;}

[class*='col-'] { position: relative;}

.col-20{ width: 20%; }
.col-25{ width: 25%; }
.col-30{ width: 30%; }
.col-33{ width: 33.33%; }
.col-50{ width: 50%; }
.col-70{ width: 70%; }
.col-80{ width: 80%; }
.col-100{ width: 100%; }

@media (max-width: 991px) {
  .tab-20 { width: 20%; }
  .tab-25 { width: 25%; }
  .tab-33 { width: 33.33%; }
  .tab-50 { width: 50%; }
  .tab-100 { width: 100%; }
}

@media (max-width: 580px) {
  .grid--sma{flex-wrap: wrap;}
  [class*='col-'] { width: 100%;}
  .sma-20 { width: 20%; }
  .sma-25 { width: 25%; }
  .sma-33 { width: 33.33%; }
  .sma-50 { width: 50%; }
  .sma-100 { width: 100%; }

  .sma-hide{display:none}
}

  <div class="container" style="border:solid 1px red; height:auto">
    <div class="grid grid--sma" style="max-height:2600px">
      <div class="col-50 sma-100" style=" border:solid 1px black;">

        <img src="img/Square-big.jpg" alt="" style="width:100%">

      </div>

      <div class="col-50 sma-100" style=" border:solid 1px black;">

        <img src="img/Square-small-1.jpg" alt="" style="width:49%">
        <img src="img/Square-small-2.jpg" alt="" style="width:49%">

        <img src="img/Square-small-2.jpg" alt="" style="width:49%">
        <img src="img/Square-small-1.jpg" alt="" style="width:49%">

      </div>


    </div>

解决方法

您会看到图像之间的差距，因为默认情况下它们是内联元素。所有内联元素的行为都是这样。

使用 Flexbox 修复

让你的图片块元素，并在父元素上创建一个 flexbox 网格

.col-50 img {
  display: block;
}

.col-50 {
  display: flex;
  flex-wrap: wrap;
}

一旦您使用了 flexbox，您就可以从图像的 HTML 代码中删除 style="width:49%"，只需将以下行添加到 CSS：

.col-50 img {
  ...
  width: 50%;
  ...
}