Working with extremely landscape and extremely portrait images

Site URL: https://fox-magnolia-xkg2.squarespace.com/

This site has some products images that are widescreen (very landscape) and also images that are very portrait (very narrow and tall).

I am managing to keep this issue in check using square thumbnails for the product listings but for individual products on mobile particularly some of the images are cropping really badly whereas they need to be shown in full.

Good examples of this extreme are: https://fox-magnolia-xkg2.squarespace.com/garden-birds/hungry%20brood (landsape)

and 

https://fox-magnolia-xkg2.squarespace.com/garden-birds/spring%20willow (portrait).

I have tried all the aspect ratio settings for the images but none of them solves the problems in all cases.

What's the best way of solving this problem?

Thanks.

https://support.squarespace.com/hc/en-us/articles/223016508-Troubleshooting-cropping-issues

Thanks. Had a look at this but whatever I do within the Squarespace settings I can't get it to work.

I end up with the heavily cropped version I've attached which is obviously useless to the user looking at the site instead of the full image. 

Is there no CSS hack to make this work? Otherwise I'm going to need to re-upload all the images as square with the corresponding background with the actual image sitting in the middle of it either horizontally or vertically.

Sites like this have portrait and landscape images and they manage to get them to all show perfectly at mobile size as well, there is no horrible cropping going on https://stevedeer.com/

This may sound a bit to simple, but with mobile sometimes it depends on which way the phone is turned. Some sites tell people to do just that, turn you phone to landscape to view a landscape and portrait to view a portrait. The site will adjust when the phone is turned. The images are larger this way also. A bit of text that gives a "for best viewing" hint or something to that effect could be added.   Just a thought. 

But the images are cropping the same whether I turn the phone round or not. Squarespace (or the theme itself) seems to be cropping the images.

Oh, I did not realize that, doesn't happen with my site. This needs further research. 

Could it be due to the particular theme I'm using? 

I'm using https://patil-demo.squarespace.com/