Dynamic Height on Responsive Image Grid?

Question

I have a "grid" of images with products, and I want these to be responsive. As you can see, on the "mobile view" the images fit on fine and look okay, but on desktop, when they're bigger horizontally, the height gets cropped too much so a lot of the image is missing.

Here's how the site looks at mobile size:

And desktop size:

Is there a way for me to have the height grow as well, while still keeping them "flush" and in a grid? No idea why I'm finding this so tricky!

The site is: here

Answer 1

The simpler (and maybe only) thing to do then, is to keep using the fixed height but with media queries. This means that you change the height of the link based on which screen width you are. This makes sense because you will always have 1, 2, 3 or 4 columns so it is quite easy to make a rough estimations of the heights you want for each case.

Answer 2

I've just resized all the images manually in Photoshop to get this working for now so the site will no longer show the problem.

Will just have to run with this!