Images on Phone are cut off on sides

I'm a hat designer and most of my hats are very wide brimmed.

My website is www.eastangelharbor.com

As you can see from the uploaded images on the 2 attachments, my hats are cut off on the sides.  I've watched youtube videos until I'm about half sick as I've tried every css code that pertains to making the images fit and the codes just don't work for me. 

I'm sure hoping you can help me out as I've checked my website using pagespeed insights and my performance is a very low score and it basically points to my images as being a problem.  

I'm currently resizing photos and optimizing as well as adding metadata, it's a very slow and tedious process, but so far it's not making much difference.  There must be something that I'm missing?  Even after reducing the photo size and optimizing, the pictures of my hats don't show up like they should.

So I'm asking how to make the images fit so they can be seen and also how to improve my performance.

Thank you so much in advance, I'll appreciate any help that you can give me.

Thank you Ziggy!  This worked first try and VERY quickly a problem solved!

Have a wonderful day!

4 hours ago, DLM said:

Thank you Ziggy!  This worked first try and VERY quickly a problem solved!

Have a wonderful day!

Very pleased to hear you've got this looking as you want it.

Hi Ziggy,

All of my wide brim Southern Belle, Victorian and Edwardian hats are showing up beautifully, but now my medium brim and small brim hats are cut off kind of funny...so I went in and fixed them and then my wide brim hats were cut off.  It seems that I can't figure a way to show all of my hat according to their brim size.  I actually need to be able to show the hats in landscape size, portrait size and square size.  Do you have any suggestions?

Thanks soooo much!

Darna