Equal height images

In a multivendor scenario we have no real control of the dimensions the user uploads, and auto cropping will produce unwanted results for them. We would rather fit the image inside the container instead of fitting the container to the picture.

So what would be the best way to ensure all images remain equal height in the shop page and single product page etc without cropping?

Thanks.

Hello,

Please make the full backup of your site and check the issue on the Storefront theme to detect if our theme causes the problem. Storefront is a free theme developed by WooСommerce.

Best Regards

Hi elise,

You have asked this question to everyone who has asked about equal height images so I assume you know the answer to this.

I’ve sorted it out myself. I will leave it here in case anyone searches for the solution;

.product-grid-item :is(.product-image-link,.hover-img) img {
    width: 100%;
    border-radius: var(--wd-brd-radius);
    height: 250px !important;
    object-fit: contain !important;
    object-position: center !important;
}

Hello,

This is not the correct solution. That is why we never give it. We are glad you have solved the issue.

Table and image elements are not changed this way in CSS.

If you have any questions please feel free to contact us.

Best Regards

What solution do you propose as the correct one? I ask because in every other example of this question being asked the answer seems to always be that it cannot be done.

Hello,

Please check this manual: https://xtemos.com/docs-topic/image-size-and-content-alignment-in-a-product-grid/

You need to upload images of the same size for the grid, if you want to use an image any place, you configure the width and height by means of the builder.

If you have any questions please feel free to contact us.

Best Regards

Hi Elise, thanks but sorry but that isn’t what I want to achieve and isn’t suitable for my use case. (As mentioned in my first post). Hence why I used CSS to ensure the image container stays at a consistent size and shows the whole image without cropping it. I thought you meant there was a better way to achieve what I needed.

Hello,

Yes, I see. I just need to inform you about the disadvantages of using CSS.

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts