[Resolved] Product image container not the same size but should be

[Matt]

My website is not showing the product image containers all the same height and width even though it’s set to 1:1 ratio. How do I make the containers all stay the same size and all images that show shrink to fit inside the container?

[Tom]

Hi there,

The image heights seem to be different.

You could tell them all to be the same like this:

.woocommerce ul.products li.product a img {
    height: 250px;
    object-fit: cover;
}

[Matt]

well… it seemed to work a bit. Most are the same size now and the others are not. I was thinking it was a variable/simple product difference causing the problem but it’s not. Some of the variable products are difference sizes than the others and some simple are different than the others. Is there a way to shrink to fit the picture on the inside as well so it’s not cropped in the center of a large photo?

[Tom]

All the images seem to be the same height now, but the grey backgrounds aren’t. You could fix that like this:

.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
    height: 100%;
}

The object-fit code I gave you basically crops the image. We can position the crop (top, bottom etc..), but it’s likely better to figure out why your images aren’t all the same size/upload images that are the same size/aspect ratio.

[Matt]

That fixed the height issue. Yea I probably need to re-upload my pictures but there are soooo many. Is there not a way to shrink to fit the picture into the picture box for all photos? You’d think there would be. That’d fix a lot of headaches.

[Tom]

Not without losing some of the picture (which is what cropping does). If you resize them without cropping, the aspect ratio will be wrong and they’ll look squished.

You can try the WooCommerce image sizing options in the Customizer: Customize > WooCommerce

However, I find them to be hit or miss sometimes.

[Matt]

Looks I’ll resize the images that don’t look right to save me some time. Thanks for the help!

[Tom]

No problem 🙂

[Author]

Posts