Trying to set height by percentage can get…complicated:
I may have misunderstood the question, but if your problem is that you have multiple images and you want them all to be the same height as each other then you’re going go need to get explicit. You can make the original images the same size, hardcode a size, or use clipping or masking to hide part of the images.
The way the images are used I wouldn’t really say they are meant to be downloaded. I would suggest using background-position: center on the .pic class to center the images.
If you want help with using image elements it would be better if you posted a Codepen with your attempt. You can just fork your project to work on a second version so it does not affect the one you have now.
Just an FYI, the example project is using CSS Grid for the image grid, not flexbox. Also, the height is calculated as calc(100% - 68px). The 68px is the height of the text box below the image.