If you want three columns and each row of images to have the same height then you could use object-fit:cover on the image to make it fit better. Using flexbox rows can all have the height of the largest item so you would end up with a page like this:
However object-fit is only supported in modern browsers (not IE11) so in IE 11 you would see rows of images but just uneven heights which may be acceptable. If that is not acceptable then you would need to add some JS to turn the foreground image into a background image so that background-size:cover can be used instead.
I have an example of that approach here:
You will notice that in modern browsers each row of images are the same height but rows may differ in height due to the fact that flexbox is finding the tallest height of the images and then scaling the others to match. If you want the same height of the images over various rows then you can use the aspect ratio padding hack to achieve that like so.
I believe that covers all eventualities