Slider container height reduced 500px, images in slider getting cut instead of resizing

I have a single column slider on home page that displays the latest products.

Since the container and image were eating up a lot of screen space, the user was having to scroll down beyond the slider to look at the products.

I decided to reduce the size of container, that worked. I now have the slider limited in its size. But the product images are being cutoff and being displayed in half instead of resizing the image to fit the container and be displayed in full.