Wordpress image resizing on home page (product category)

The CSS of WooCommerce is stretching the images to 100% of their parent <div>, as seen here:

 ul.products li.product a img {
     -moz-transition: all 0.2s ease-in-out 0s;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
     display: block;
     height: auto;
     margin: 0 0 8px;
     **width: 100%;**
 }

You can simply remove or override that line using the !important declaration in another CSS file. Also, you can override it to width: auto and change the margin: 0 0 8px in that rule set to margin: 0 auto 8px auto to center those images in their div container.

First of all, make sure your stylesheet is being included properly. In the chrome inspector, I found this:

edit:I replaced the image as I noticed it was hard to read so I zoomed in and took another screenshot.

I'm not to sure if your styles for the images are included in this file or not, but my first stop would be to make sure that everything is being included. Make sure that when you are enqueing the style (as you should) you use get_template_directory_uri() like so:

wp_register_style( 'custom-style', get_template_directory_uri() . '/path/to/css' );
wp_enqueue_style( 'custom-style' );

If this is not the issue, and the styling is being included (and the aforementioned stylesheet is a different one), what I've done in the past is wrote a css to style all images I want to be the same width (with the use of a class or what have you). This doesn't work when WordPress automatically puts in a height attribute directly into the html. In that case, I write a quick jQuery script that searches for all the images on a page and removes the height attribute.

$(document).ready(function(){
     $("img").removeAttr('height');
});

With just a width attribute in the css, the browser should automatically adjust accordingly. However, you would have to include an !important at the end of the css, as inline attributes trump stylesheets.