Question

我想要创建一个首先具有大型特色图像的图像网格，然后向右，具有4个网格（每行2个）..然后在其下面，一次有4个图像的行。

我认为flexbox可能能够解决这个问题。

说我有这样的标记

 <div class="image-grid">
   <div>
    <img src="https://unsplash.it/1024/1024">
  </div>
  <div>
    <img src="https://unsplash.it/1000/800">
  </div>
  <div>
    <img src="https://unsplash.it/1100/1000">
  </div>
  <div>
    <img src="https://unsplash.it/1120/1000">
  </div>
  <div>
    <img src="https://unsplash.it/1130/1024">
  </div>
  <div>
    <img src="https://unsplash.it/1101/1024">
  </div>
  <div>
    <img src="https://unsplash.it/1020/1024">
  </div>
  <div>
    <img src="https://unsplash.it/1021/1024">
  </div>
  <div>
    <img src="https://unsplash.it/1002/1024">
  </div>
  <div>
    <img src="https://unsplash.it/1003/1024">
  </div>
  <div>
    <img src="https://unsplash.it/1004/1024">
  </div>
  <div>
    <img src="https://unsplash.it/1005/1024">
  </div>
</div>

使用CSS

.image-grid {
  display: flex;
  flex-wrap: wrap;
}

img {
  width: 100%;
}

.image-grid > div:first-child {
  flex-basis: 50%;
}

.image-grid > div {
  flex-basis: 25%;
}

这个差不多做我需要的东西。 Codepen here。

我需要修复两件事......

在特色图片的右侧显示4张图片，而不是当前的2张。
拉伸每个图像以适合它的空间，因此它是一个紧密的网格（任何图像周围都没有间距）。我正在考虑使用object-fit CSS属性，但我还没有使用它。

谢谢。

Answer 1

.image-grid {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 200px;
  height: 100px;
}
.image-grid, .featured > img:first-child {
  width: 100px;
  height:100px;
}
.image-grid > img {
  width: 50px;
  height:50px;
}

<div class="image-grid featured">
    <img src="https://unsplash.it/1024/1024">
    <img src="https://unsplash.it/1000/800">
    <img src="https://unsplash.it/1100/1000">
    <img src="https://unsplash.it/1120/1000">
    <img src="https://unsplash.it/1130/1024">
</div>
<div class="image-grid">
    <img src="https://unsplash.it/1101/1024">
    <img src="https://unsplash.it/1020/1024">
    <img src="https://unsplash.it/1021/1024">
    <img src="https://unsplash.it/1002/1024">
    <img src="https://unsplash.it/1003/1024">
    <img src="https://unsplash.it/1004/1024">
    <img src="https://unsplash.it/1005/1024">
</div>

Answer 2

所以我认为最简单的方法是使用像Foundation这样的框架来创建顶行，然后使用flexbox。

<div class="row">
  <div class="medium-6 columns featured-image">
    <img src="https://unsplash.it/1023/1024">
  </div>
  <div class="medium-6 columns featured-image-grid">
    <div class="row">
      <div class="medium-6 columns">
        <img src="https://unsplash.it/1024/1024">
      </div>
      <div class="medium-6 columns">
        <img src="https://unsplash.it/1022/1024">
      </div>
    </div>
    <div class="row">
      <div class="medium-6 columns">
        <img src="https://unsplash.it/1021/1024">
      </div>
      <div class="medium-6 columns">
        <img src="https://unsplash.it/1020/1024">
      </div>
    </div>
  </div>
</div>

<div class="image-grid">
  <img src="https://unsplash.it/1020/1024">
  <img src="https://unsplash.it/1020/1025">
  <img src="https://unsplash.it/1020/1022">
  <img src="https://unsplash.it/1020/1021">
  <img src="https://unsplash.it/1020/1029">
  <img src="https://unsplash.it/1020/1028">
  <img src="https://unsplash.it/1020/1027">
  <img src="https://unsplash.it/1020/1023">
  <img src="https://unsplash.it/1020/1024">
  <img src="https://unsplash.it/1020/1025">
</div>

使用CSS

.row {
  max-width: 100%;
  margin: 0 !important;
}

.columns {
  padding: 0;
}

.featured-image img {
  height: 400px;
}

.featured-image-grid img {
  height: 200px;
}

img {
  object-fit: cover;
  width: 100%;
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
}

.image-grid > img {
  flex-basis: 25%;
  height: 200px;
  width: auto;
}

Codepen here。

需要做一些工作来使其响应，但它适用于我需要它做的事情。

如何使用完全包裹主图像的flexbox创建图像网格？

2 个答案: