Picture shapes breaking my design

Hello every one. I’m relatively new to webdesign but have the general concepts down. I’m currently working on a site for a customer and on it there is a page for displaying items in her shop. The problem I’m having is some of the images I’m using end up breaking my design by moving everything around. I’ve tried restricting the width and height so that it doesn’t break it but now the images are distorted. The images also break the product pages but not to the extent of the shop page. I m a bit at a loss as to where to go from here does any one have suggestions as how to proceed or maybe an alternative. Also this stuff will likely be replaced once ecommerce is out but I need a place holder for now

Here is my site Read-Only: https://preview.webflow.com/preview/theswampdoor?preview=5eecede6ff9d9145adf53b758d0fe882

Sure, I can help. Did you get it fixed or are you still working on it?

Im currently working on the main page right now. My goal is to make it as easy as possible for the customer to update products etc. Whats the best practice here?