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

Home Forums Support Product image container not the same size but should be

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1254133
    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?

    #1254373
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #1254394
    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?

    #1255263
    Tom
    Lead Developer
    Lead Developer

    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.

    #1258394
    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.

    #1258719
    Tom
    Lead Developer
    Lead Developer

    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.

    #1260207
    Matt

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

    #1260355
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.