Hello,
The best solution is to use all the images in one size, I mean you need to choose the optimal size for your image and then use it for all the future images. For example instead of https://shop.johnspratt.co.uk/wp-content/uploads/2017/12/0083E7C1-1600-1600.jpg image use https://shop.johnspratt.co.uk/wp-content/uploads/2017/12/0083E7C1-1600-1600-1-edited.jpg or proportional.
I have added some CSS code to fix the situation on the grid and added min-height for your product image block but it would better to use normal images.
.content-product .product-content-image { min-height: 300px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
Regards
