html - 如何使 flexbox 网格图像响应

Question

我正在尝试创建一个 flexbox 网格，其中包含具有不同宽度和高度的图像，我希望在不同屏幕尺寸上显示这些图像时能够响应。我现在有了网格，但我不知道如何让它响应。我试图将 Bootstrap 中的响应类应用于当前布局，但没有任何运气。我也试过砌体，但没有解决我的问题。

所以问题是，我该如何做出响应，这是否是正确的方法？

HTML

<div class="flex_container">
  <div class="flex_group__1">
    <img src="holder.js/460x670" />
    <img src="holder.js/460x408" />
  </div>
  <div class="flex_group__2">
    <img src="holder.js/645x813">
    <img src="holder.js/645x265">
  </div>
  <div class="flex_group__3">
    <img src="holder.js/808x330"/>
    <div class="flex_group__3_inner_bottom">
      <img src="holder.js/452x748"/>
      <img src="holder.js/356x748"/>
    </div>
  </div>
</div>

CSS

.flex_group__1, .flex_group__2, .flex_group__3, .flex_group__3_inner_bottom, .flex_container {
  display: flex;
}

.flex_container {
  flex-direction: row;
}

.flex_group__3 {
  flex-direction: row wrap;
  justify-content: flex-end;
}

.flex_group__1, .flex_group__2, .flex_group__3 {
  flex-direction: column;
}

.flex_container * {
  border: 1px solid;
}
img {
  max-width: 100%;
}

Answer 1

这是一个布局更接近您要求的版本，并且更容易理解。

用这个你要么设置background-image (正如我在下面的堆栈片段中所做的那样)在每个图像持有者上，或者添加一个 img标记的元素。

Fiddle demo

html, body {
  margin: 0;
}
.wrapper {
  position: relative;
}
.wrapper:after {
  padding-top: 56.25%;   /* 16:9 ratio */
  display: block;
  content: ' ';
}
.flex-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 5px;
  display: flex;
}
.flex-container > div {           /*  .flex-col-1, .flex-col-2, .flex-col-3  */
  height: 100%;
  display: flex;
  flex-direction: column;
}
.flex-container > div > div {     /*  .flex-row-1, .flex-row-2    */
  margin: 5px;
  display: flex;
}

.flex-col-1 {
  width: 25%;
}
  .flex-col-1 .flex-row-1 {
    height: 70%;
    background: #ddd url(https://placeimg.com/400/600/arch) no-repeat center;
    background-size: cover;
  }
  .flex-col-1 .flex-row-2 {
    height: 30%;
    background: #ddd url(https://placeimg.com/400/600/arch) no-repeat center;
    background-size: cover;
  }

.flex-col-2 {
  width: 32.5%;
}
  .flex-col-2 .flex-row-1 {
    height: 80%;
    background: #ddd url(https://placeimg.com/400/600/arch) no-repeat center;
    background-size: cover;
  }
  .flex-col-2 .flex-row-2 {
    height: 20%;
    background: #ddd url(https://placeimg.com/400/600/arch) no-repeat center;
    background-size: cover;
  }

.flex-col-3 {
  width: 42.5%;
}
  .flex-col-3 .flex-row-1 {
    height: 44%;
    background: #ddd url(https://placeimg.com/400/600/arch) no-repeat center;
    background-size: cover;
  }
  .flex-col-3 .flex-row-2 {
    height: 56%;
  }

.flex-col-3-inner {
  flex: 1;
  display: flex;
}
  .flex-col-3-inner .flex-col-1-inner {
    width: 40%;
    margin-right: 5px;
    background: #ddd url(https://placeimg.com/400/600/arch) no-repeat center;
    background-size: cover;
  }
  .flex-col-3-inner .flex-col-2-inner {
    width: 60%;
    margin-left: 5px;
    background: #ddd url(https://placeimg.com/400/600/arch) no-repeat center;
    background-size: cover;
  }

<div class="wrapper">
  <div class="flex-container">
    <div class="flex-col-1">
      <div class="flex-row-1">
      </div>
      <div class="flex-row-2">
      </div>
    </div>
    <div class="flex-col-2">
      <div class="flex-row-1">
      </div>
      <div class="flex-row-2">
      </div>
    </div>
    <div class="flex-col-3">
      <div class="flex-row-1">
      </div>
      <div class="flex-row-2">
        <div class="flex-col-3-inner">
          <div class="flex-col-1-inner">
          </div>
          <div class="flex-col-2-inner">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

---

第二个样本，使用 img ，我也在其中添加了这条规则

.flex-container img {
  height: auto;
  width: 100%;
}

如您所见，使用这样的布局，img元素需要更多的个性化触摸才能使它们表现良好。

html, body {
  margin: 0;
}
.wrapper {
  position: relative;
}
.wrapper:after {
  padding-top: 56.25%;   /* 16:9 ratio */
  display: block;
  content: ' ';
}
.flex-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 5px;
  display: flex;
}
.flex-container > div {           /*  .flex-col-1, .flex-col-2, .flex-col-3  */
  height: 100%;
  display: flex;
  flex-direction: column;
}
.flex-container > div > div {     /*  .flex-row-1, .flex-row-2    */
  margin: 5px;
  display: flex;
}

.flex-container img {
  height: auto;
  width: 100%;
}

.flex-col-1 {
  width: 25%;
}
  .flex-col-1 .flex-row-1 {
    height: 70%;
    background: #ddd;
  }
  .flex-col-1 .flex-row-2 {
    height: 30%;
    background: #ddd;
  }

.flex-col-2 {
  width: 32.5%;
}
  .flex-col-2 .flex-row-1 {
    height: 80%;
    background: #ddd;
  }
  .flex-col-2 .flex-row-2 {
    height: 20%;
    background: #ddd;
  }

.flex-col-3 {
  width: 42.5%;
}
  .flex-col-3 .flex-row-1 {
    height: 44%;
    background: #ddd;
  }
  .flex-col-3 .flex-row-2 {
    height: 56%;
  }

.flex-col-3-inner {
  flex: 1;
  display: flex;
}
  .flex-col-3-inner .flex-col-1-inner {
    width: 40%;
    margin-right: 5px;
    background: #ddd;
  }
  .flex-col-3-inner .flex-col-2-inner {
    width: 60%;
    margin-left: 5px;
    background: #ddd;
  }

<div class="wrapper">
  <div class="flex-container">
    <div class="flex-col-1">
      <div class="flex-row-1">
        <img src="https://placeimg.com/400/600/arch" alt="">
      </div>
      <div class="flex-row-2">
        <img src="https://placeimg.com/400/600/arch" alt="">
      </div>
    </div>
    <div class="flex-col-2">
      <div class="flex-row-1">
        <img src="https://placeimg.com/400/600/arch" alt="">
      </div>
      <div class="flex-row-2">
        <img src="https://placeimg.com/400/600/arch" alt="">
      </div>
    </div>
    <div class="flex-col-3">
      <div class="flex-row-1">
        <img src="https://placeimg.com/400/600/arch" alt="">
      </div>
      <div class="flex-row-2">
        <div class="flex-col-3-inner">
          <div class="flex-col-1-inner">
            <img src="https://placeimg.com/400/600/arch" alt="">
          </div>
          <div class="flex-col-2-inner">
            <img src="https://placeimg.com/400/600/arch" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

这里还有 2 个变体，一个使用 background-size: contain;

• https://jsfiddle.net/LGSon/htjccmfg/1

和另一个background-size: 100% 100%

• https://jsfiddle.net/LGSon/htjccmfg/2