防止图像强制 Flexbox 父容器内容器的高度

Question

我有一个棘手的布局需要用图像网格来解决，第一行由 4 个 25% 的块组成，第二行将有 3 个块，其中 2 x 25% 的块和 1 个图像占据剩余空间的 50%。

我的布局工作正常，我只需将 50% 块的高度锁定为与 25% 块相同，并使用对象拟合来约束图像。

但是，无论我尝试什么，50% 块内的较大图像都会根据其纵横比增长到图像的自然高度。

这里有代码笔

https://codepen.io/alexmorris/pen/jOQyMrj/c19404fb6ed4745044b77cd8fe4b3bee

    *, html {
      box-sizing:border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica     neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
      margin:0;
      padding:0;
    }

    img {
      width:100%;
      height:auto;
    }

    section {
      display:flex;
      flex-wrap:wrap;
      flex-direction:row;
      align-items:flex-start;
    }

    div {
      flex: 0 0 25%;
    }

    div:nth-child(7) {
      flex: 0 0 50%;
      align-self: start;
    }

    div:nth-child(7) img {
      object-fit:cover;
      height:100%;
      object-position:center;
    }

尝试了所有的 flex-shrink 变体都无济于事

Answer 1

只需在图像上添加

height:700px;

*, html {
  box-sizing:border-box;
}

html, body {
  height:100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  margin:0;
  padding:0;
}

img {
  width:100%;
  height:auto;
  height:700px;
}

section {
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  
  align-items:flex-start;
}

div {
  flex: 0 0 25%;
}

div:nth-child(7) {
  flex: 0 0 50%;
  align-self: start;
}

div:nth-child(7) img {
  object-fit:cover;
  object-position:center;
}

<section>
  
  <div><img src="https://assets.codepen.io/66278/kam3.jpg" alt="" />
  <p>Some words go in here</p></div>
  <div><img src="https://assets.codepen.io/66278/kam3.jpg" alt="" />
  <p>Some words go in here</p></div>
  <div><img src="https://assets.codepen.io/66278/kam3.jpg" alt="" />
  <p>Some words go in here</p></div>
  <div><img src="https://assets.codepen.io/66278/kam3.jpg" alt="" />
  <p>Some words go in here</p></div>
  <div><img src="https://assets.codepen.io/66278/kam3.jpg" alt="" />
  <p>Some words go in here</p></div>
  <div><img src="https://assets.codepen.io/66278/kam3.jpg" alt="" />
  <p>Some words go in here</p></div>
  <div><img src="https://assets.codepen.io/66278/kam3.jpg" alt="" />
  <p>Some words go in here</p></div>

  
</section>