Html 如何使flexbox网格图像具有响应性

我正在尝试创建一个flexbox网格，其中的图像具有不同的宽度和高度，当在不同的屏幕尺寸上显示时，我希望表现出响应性。我现在有网格，但我不知道如何使其响应。我曾尝试将引导中的响应类应用于当前布局，但没有任何运气。我也尝试过砌石，但它并没有解决我的问题

因此，问题是，我如何使这一方法具有响应性，甚至是正确的方法

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>

---

这是一个布局更接近您要求的版本，并且更易于遵循

使用此选项，您可以在每个图像保持器上设置

背景图像

（就像我在下面的堆栈片段中所做的那样），或者向标记中添加

img

元素

html，正文{
保证金：0；
}
.包装纸{
位置：相对位置；
}
.包装工：之后{
填充顶部：56.25%；/*16:9比率*/
显示：块；
内容：''；
}
.柔性容器{
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
填充物：5px；
显示器：flex；
}
.flex容器>div{/*.flex-col-1、.flex-col-2、.flex-col-3*/
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
.flex容器>div>div{/*.flex-row-1、.flex-row-2*/
保证金：5px；
显示器：flex；
}
.flex-col-1{
宽度：25%；
}
.flex-col-1.flex-row-1{
身高：70%；
背景：#ddd url(https://placeimg.com/400/600/arch)无重复中心；
背景尺寸：封面；
}
.flex-col-1.flex-row-2{
身高：30%；
背景：#ddd url(https://placeimg.com/400/600/arch)无重复中心；
背景尺寸：封面；
}
.flex-col-2{
宽度：32.5%；
}
.flex-col-2.flex-row-1{
身高：80%；
背景：#ddd url(https://placeimg.com/400/600/arch)无重复中心；
背景尺寸：封面；
}
.flex-col-2.flex-row-2{
身高：20%；
背景：#ddd url(https://placeimg.com/400/600/arch)无重复中心；
背景尺寸：封面；
}
.flex-col-3{
宽度：42.5%；
}
.flex-col-3.flex-row-1{
身高：44%；
背景：#ddd url(https://placeimg.com/400/600/arch)无重复中心；
背景尺寸：封面；
}
.flex-col-3.flex-row-2{
身高：56%；
}
.flex-col-3-内部{
弹性：1；
显示器：flex；
}
.flex-col-3-inner.flex-col-1-inner{
宽度：40%；
右边距：5px；
背景：#ddd url(https://placeimg.com/400/600/arch)无重复中心；
背景尺寸：封面；
}
.flex-col-3-inner.flex-col-2-inner{
宽度：60%；
左边距：5px；
背景：#ddd url(https://placeimg.com/400/600/arch)无重复中心；
背景尺寸：封面；
}

我找到了我的另一个样本，看看这个：这对我的奇数大小的图像有效吗？是的。。。我决定创建第一个代码库：），以帮助您入门。非常棒的示例！这让我意识到下次我应该设计得更简单；-）除此之外，当我将图像添加到flex Box时，其中一些图像被拉伸了，这是不应该的。这是预期的行为吗？@JavaCake谢谢，是的，除非你逐一设置它们。我更新并添加了一个2:nd示例+一个额外的CSS规则，使用它，您将看到发生了什么。可能您需要在每个图像上设置单独的值，因此使用

背景图像

有一些好处，尤其是当您有这样预定义的布局时。我明白您的意思，因为我遇到了与此示例相同的问题。下角的两幅图像有点“失控”。@JavaCake-Yepp，由于每幅图像都需要在一定的纵横比范围内，所以必须进行设置，否则它们会失真。

background size:cover

会自动执行此操作，并在高度或宽度上剪切图像，因此在使用

img

时，需要为每个图像设置此设置。因此，我需要计算每个flex单元的像素百分比，以使其正常工作？

.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%;
}