I have a flexbox with several images of different sizes. I need to keep the aspect ratio of the images (which are dynamic, so using flexs with priority wouldn't work), but want them to fill the space above them. So in the case of this example, the one of the road would move up to the one of the ducks.
The structure of the flexbox is like so:
<section class="posts"><article class="postcard"><a href="/ducks/"><img class="post-image" srcset="..." src="..."></a></article> ...</section>Currently, my styles for this section looks like this:
/* Post display boxes */section.posts { display: flex; flex-wrap: wrap; flex-flow: wrap; justify-content: space-between;}/* The card */.postcard { width: 100%; max-width: 32%; height: fit-content;}.postcard > a > img { width: 100%;}If it's any help I'm writing this with pure CSS (no precompiler) and in Handlebars as a Ghost theme.
I've tried a lot of playing around with justify-content, flex-wrap, flex-flow, flex-shrink/grow, in fact, if it begins with flex- I've likely tried it.
I could cover the images, but that would be hard to keep the aspect ratio with.