Product grid images

Hi! I’m looking for a CCS code that would make Images on Product grid equal height but won’t stretch, squeeze or crop them. I am using this one but please see picture with before and after – I would like to create an automatic white background for images which are wide or too long:
.product-grid-item .product-image-link img, .product-grid-item .hover-img img {
width: auto;
height: 200px;
}

Could you please help?

Attachments:

You must be logged in to view attached files.

I found the right CSS code and fixed my issue for the shop grids, but this code doesn’t affect featured products grid on homepage – could you please precise which div class is it?:

.product-grid-item .product-image-link img, .product-grid-item .hover-img img {
width: auto !important;
height: 200px;
object-fit: contain;
}

Hi,

We have checked your site and the following custom code is working on your products grid on homepage (screenshot https://prnt.sc/ciRPcL_sTyQL).

Kind Regards

[Author]

Posts