I have a tricky layout to solve with a grid of images, the first row runs as 4 blocks of 25% across, the second will have 3 blocks with 2 x 25% blocks and 1 image taking up 50% of the remaining space.
I have the layout working fine I just need to lock the 50% blocks height to the same as the 25% blocks and constrain the image using object-fit.
However no matter what I try the larger image inside the 50% block is growing to the natural height of the image based on its aspect ratio.
codepen here
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;}<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>Have tried all variations of flex-shrink to no avail