Return to previous page

Is it possible in shop grid to contain images size in product cards?

This topic has 4 replies, 2 voices, and was last updated 2 years ago ago by Rose Tyler

Vladis

Participant

February 16, 2023 at 21:54

1. Now, in my shops grid, if I inspect images, I see that rendered size is 330x330px, but original thumbnail size is 300x300px. That means that images drops quality and pixelates due to too small thumbs, but bigger rendering space. How to fix it?

2. Is it possible to contain original aspect ratio of images in product cards? I mean I have images with 3:2 and 2:2 aspect ratio, but product cards always render 1:1 thumbnail. How can I contain image aspect ratio in product cards in grids?

https://cdn.discordapp.com/attachments/1059559562069414038/1075881627038781561/image.png

#347232 Copied Theme version: 9.0.3

3 Answers

Rose Tyler

Support staff

February 17, 2023 at 08:28

Hello, Vladis,

Please read next articles – https://www.8theme.com/documentation/xstore/woocommerce/product-images/ https://docs.woocommerce.com/document/fixing-blurry-product-images/

Kind Regards,
8theme team

#347268 Copied

Vladis

Participant

February 17, 2023 at 12:03

I read it, its exactly what I need. The only problem now is that when different product with different aspect ratio go in the same row on desktop view, grid looks strange. Can you provide css code to make the same image wrapper height but keep image aspect ratio inside? please

To make all image wrappers 1:1 aspect ratio and align images inside to keep their original aspect ratio
https://media.discordapp.net/attachments/1059559562069414038/1076096016635412551/pvz.png?width=1256&height=864

#347297 Copied
Rose Tyler

Support staff

February 17, 2023 at 17:09
Hello, Vladis,

Try to use the next custom CSS code:

.content-product .product-content-image img { object-fit: cover; max-height: 190px; }

there is no possibility to keep image aspect ratio inside, unfortunately.

Kind Regards,
8theme team
#347346 Copied
Tagged: images size, possible, product cards, shop grid, themes, woocommerce, wordpress
Viewing 4 results - 1 through 4 (of 4 total)