Can WordPress auto “fit” an image ?

There is, but it’s not using a standard HTML image tag.

What you would need to do instead is modify the code to output a different element, set a background image on that element and use CSS to display it to the full size of the element. As an example…

<div class="product-image" style="background-image: url('/path/to/image.jpg');"></div>

.product-image {
    width: 300px;
    height: 300px;
    background-position: center center;
    background-size: cover;
}

Realize that catacaustic’s solution would require you to specify an image that has not already been cropped by WP. Such an image is probably much larger than necessary, which would then drag down page load speed when there are 16 some such images on a page. You’ll also need a more specific selector than “product-image”, one that is unique to each image.

Another approach would be to change the “crop” value to 0 (false) for the related image sizes in the global $_wp_additional_image_sizes array. I’m not sure, but I think the sizes used by WooCommerce are “woocommerce_thumbnail” and/or “shop_catalog”. Changing these from the “init” action should be fine. This change will only apply to future uploads, you can use one of the regenerate thumbnails plugins to resize existing images.

You will get erratic behavior with scaled images if there is a mix of landscape and portrait orientations because responsive CSS presumes one or the other. IMO, there are some good benefits to square aspects. They do however require you to take product pictures with this in mind and ensure important portions of the product do not extend into the non-square portions of the frame. If you do choose to use rectangular aspects, for the images to look good on a page you should be sure all aspect ratios are the same and do not mix portrait and landscape orientations.

I have had this same discussion way to many times with the designers that I work wtih. ??

Realize that catacaustic’s solution would require you to specify an image that has not already been cropped by WP

Not quite. You are right that the image would be larger than required, but you can still use a cropped version of the image. If you’re concerned about loading itmes you can specify multiple images at different breakpoints for different sized screens.

You’ll also need a more specific selector than “product-image”, one that is unique to each image.

No, you don’t. That class specifies the size of the element and how the background it displayed. The actual background image is set inline on each element, so there’s no need for anything more specific.

You will get erratic behavior with scaled images if there is a mix of landscape and portrait orientations because responsive CSS presumes one or the other.

That’s what my solution works around. What I’m offering is a way to have images display all at the same size regardless of orientation, pixel size, etc. Cropping or not cropping images always has the chance of inconsistancy. I know that first hand from images set to crop at the same size, but they don’t because the client has uploaded ones that are smaller than the cropped dimensions, so the default ‘full’ size image is shown, mixing up sizes on the page.

If you can guarantee that every image uploaded will always be larger than the highest cropped size, then use tags and cropped images. If you can’t (and most clients don;t understand this) then what I’ve suggested is the only way to be 100% sure that every image is displayed in the same size everywhere.

Thanks. I did not have time to get to this today but hopefully will tomorrow. It’s going to take me a while to absorb all of this. ??