Images on product archive are too small – css solution?
-
Images on product archive are too small
is there a css solution?
Hello,
You can find it under Appearance >> Customize >> WooCommerce >> Product Images.
You can define the “height” of the shop thumbnails by setting up the width : height aspect ratio in the “Thumbnail cropping” section:
Custom: In Custom, you can select the aspect ratio of the image.
Here are some of the popular aspect ratios (1:1, 5:4, 4:3, 3:2, 16:9 and 3:1).
Uncropped: The height of the image will be untouched. Images will be displayed using the aspect ratio in which they were uploaded: https://ibb.co/6mR6DbD
Please check this manual: https://xtemos.com/docs-topic/image-size-and-content-alignment-in-a-product-grid/
Best Regards,
Thanks for the reply
But if i set the aspect ratio (3:6), that shows the image – see the url sent earliger
– Now it shows the entire image, but the image is VERY tall
Is there a way to maintain the aspect 3:6, but set a max height? …. (… woocommerce only sets max-width)
Okay I thin I fixed with CSS:
.wd-product :is(.product-image-link,.hover-img) img {
width: 100%;
max-height: 400px;
max-width: 200px;
}
setting max-width and max-height
Sorry – it didnt work
It cust wide image wrong – see attachment
Hello,
Unfortunately, WooCommerce does not provide a built-in “max height” control for product images when using custom aspect ratios. The image output is controlled only by the aspect ratio (width : height) that you define under:
Appearance > Customize > WooCommerce > Product Images → Thumbnail cropping
When you select a custom ratio like 3:6, WooCommerce forces the image container to strictly follow that ratio, which is why the images appear tall.
To get more balanced image dimensions, we recommend using one of the standard ratios such as:
1:1
4:3
3:2
Best Regards,
… wow … this is no solution, as shown before
it must besolved with css – tell me how?
Hello,
Sorry to say the images are not customized with Custom CSS Code due to their nature. Your images differ in size considerably. The only way to make the view awesome is to upload images of the same size and proportion.
Best Regards,
.
