如何使网格中的图像填充100％的父元素？

Question

我试图调整父容器中的图像以填充100％的可用空间，但我总是在最后一个图像下面留出一点空间。

我想通过填充图像的可用空间来摆脱红色背景。照片有不同的尺寸和宽高比...任何想法？

这就是我想要实现的目标：

我的代码：

＆＃13;

＆＃13;

.home-photos-grid {
  width: 1200px;
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
  -moz-column-gap: 0;
  -webkit-column-gap: 0;
  margin-bottom: 0;
  background: #D33383;
}

.home-photos-grid .post-image {
  margin: 0;
  padding: 0;
  display: inline-block;
  width: 100%;
  float: left;
}

.post-image img {
  width: 100%;
}

@media only screen and (min-width: 740px) {
  .home-photos-grid {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}

＆＃13;

<div class="home-photos-grid">
  <div class="post-image">
    <img src=" https://unsplash.it/500?image=123&gravity=east" />
  </div>
  <div class="post-image">
    <img src="https://picsum.photos/500/400/?image=70" />
  </div>
  <div class="post-image">
    <img src="https://picsum.photos/500/400/?image=50" />
  </div>
  <div class="post-image">
    <img src="https://picsum.photos/500/400/?image=60" />
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

谢谢！

Answer 1

您正在看到图像之间的空白区域。将font-size: 0;添加到父容器.home-photos-grid;，图像之间的间隙将消失。

要实现这种布局，您的图像将自动拉伸以填补底部间隙需要手动干预。甚至包装，砖石等也无法神奇地决定哪个图像应该突破它的流动。

您可以使用js来测量间隙的高度，从div中移除那么多高度并设置隐藏的溢出。

另一个想法是设置一个覆盖div底部的背景图像，以便填补空白。

.home-photos-grid {
  width: 1200px;
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
  -moz-column-gap: 0;
  -webkit-column-gap: 0;
  margin-bottom: 0;
  background: #D33383;
  font-size: 0;
}

.home-photos-grid .post-image {
  margin: 0;
  padding: 0;
  display: inline-block;
  width: 100%;
  float: left;
}

.post-image img {
  width: 100%;
}

@media only screen and (min-width: 740px) {
  .home-photos-grid {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}

<div class="home-photos-grid">
  <div class="post-image">
    <img src=" https://unsplash.it/500?image=123&gravity=east" />
  </div>
  <div class="post-image">
    <img src="https://picsum.photos/500/400/?image=70" />
  </div>
  <div class="post-image">
    <img src="https://picsum.photos/500/400/?image=50" />
  </div>
  <div class="post-image">
    <img src="https://picsum.photos/500/400/?image=60" />
  </div>

</div>