Verhindern Sie, dass das Bild die Höhe des Containers innerhalb der übergeordneten Flexbox erzwingt ⇐ CSS

[Guest]

Ich habe ein kniffliges Layout mit einem Bildraster zu lösen. Die erste Reihe besteht aus 4 Blöcken mit 25 % Breite, die zweite besteht aus 3 Blöcken mit 2 x 25 %-Blöcken und 1 Bild nimmt 50 % des Rests ein Platz.
Ich habe das Layout einwandfrei funktioniert. Ich muss nur die Höhe der 50 %-Blöcke auf die gleiche Höhe wie die der 25 %-Blöcke sperren und das Bild mithilfe der Objektanpassung einschränken.
Aber egal, was ich versuche, das größere Bild innerhalb des 50 %-Blocks wächst basierend auf seinem Seitenverhältnis auf die natürliche Höhe des Bildes.
hier codepen
https://codepen.io/alexmorris/pen/jOQyM ... d8fe4b3bee

Code: Select all

*,
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;
}

Code: Select all

[img]https://assets.codepen.io/66278/kam3.jpg[/img]
Some words go in here

[img]https://assets.codepen.io/66278/kam3.jpg[/img]
Some words go in here

[img]https://assets.codepen.io/66278/kam3.jpg[/img]
Some words go in here

[img]https://assets.codepen.io/66278/kam3.jpg[/img]
Some words go in here

[img]https://assets.codepen.io/66278/kam3.jpg[/img]
Some words go in here

[img]https://assets.codepen.io/66278/kam3.jpg[/img]
Some words go in here

[img]https://assets.codepen.io/66278/kam3.jpg[/img]
Some words go in here

Habe alle Varianten von Flex-Shrink ausprobiert, ohne Erfolg