Responsive image height using flexbox

Working on a mock portfolio page and am experiementing with flex… I have two main questions:

  1. Is there a way to get an image height to scale as if it was a flex item/container? As-is the width will scale but the height remains unchanged which can be observed in the bottom row as the window is widened.
  2. Is there a better way to keep the bottom row in line with the top and keep all the widths matching? For example, at window-size 900px, the 5th project image is below the other four but is terribly stretched. Would it be better to add one or more empty containers to keep it more or less in the same scale? Or is there something more effective?

codepen link: https://codepen.io/pbartlett/pen/ExYOPVW?editors=1100
thanks guys!