Image box contains half image, rest is filled in black after CSS

Hello,

I am trying to make my images smaller for my shop page. At first my images were all being uploaded out of alignment to my woocommerce shop page. I tried regenerating thumbnails… etc… This CSS code that I put in seemed to work, but some of the images are uploaded as you can see on the page, left aligned and the rest is filled in with black. I’ve tried removing the black background with css and taking out padding and margin. This is the CSS code I have in place now.

li.product.product img {
height: 150px !important;
object-fit: contain
}
img {
width: auto
}

How do I get all of my images to look like the product “4 KINGS CIG 4/$.99 WATER GRAPE” and not like the products on the row below it.

The page I need help with: [log in to see the link]