The Product Image that shows when viewing the Shop page appears larger than other pictures that don’t have an issue with the secondary product image showing behind the primary product image.
Because there’s such a significant size difference between the product images, I don’t think it looks professional.
The Hard Crop image setting has been unchecked, and the Catalog Image dimensions are set to 300 x 200. This is what it looks like when I check the Hard Crop image setting box.
If I remove the code you provided earlier, and leave the Hard Crop setting checked, this is what the images look like in the Shop page
Not all of the images are the same dimensions. Some are 600×400, some 400×600, some 600×600 and others are 486×648.
In this screenshot, both images are 600 x 600
In this screenshot, the Product image is 600 x 600 and the second product image is 486 x 648.
They look the same if the Hard Crop setting is checked or unchecked, and the code you provided is added to the Custom CSS.
I have not tried the Regenerate Thumbnails plugin, however, I do have the EWWW Image Optimizer installed and activated.