How can I use different aspect ratios for product images?

Site URL: https://www.clic.com/

Hi,

I have been having an issue with this site that I can't seem to find an ideal solution to. There are many product pages with different types of products that all have different dimensions of images. Some are artworks that cannot be cropped and are mostly horizontal while some are products that are mostly vertical. Having all images at the same aspect ratio while also having the slideshow gallery option (rather than stacked) causes some of the artworks to be cut off on the checkout page.

I tried adding in some css to solve this. This is what I used: 

.ProductItem-gallery-slides-item-image {

    object-fit: contain !important;

    object-position: middle;

    width: 100% !important;

    height: 100% !important;

    position: static !important;}

.tweak-product-item-gallery-aspect-ratio-34-three-four-vertical .ProductItem-gallery-slides::before {

    padding-bottom: 0 !important;}

.tweak-product-item-gallery-design-slideshow .ProductItem-gallery-slides-item {

    position: relative !important;}

This did successfully stop images from being cut off on the checkout page, but some of the images show up too large and were blurry. It also created an issue with the slideshow gallery of secondary product images (they showed up with a large gap underneath the main image rather than directly underneath).

I removed the code and right now am temporarily using the stacked option, but this isn't ideal and some images are still too big on the checkout page. Here are examples of this issue:

 https://www.clic.com/art-books/picasso-sculpture 

https://www.clic.com/love-tanjane/raw-pleat-collar-dress-in-army-from-love-tanjane

Is there a way to assign different aspect ratios to different pages of the site without any images cutting off, without images being too big/blurry, and with still being able to use the slideshow option? 

Thank you! 

To apply code on Shop Page only, you can wrap the code in style tag & add to Page Header

<style>
  paste your CSS code here
</style>

Do similar for other pages

Thank you! 

I tried this out, but I'm not sure if the code I had above works for this since it seems to not change anything when I put it in the header under html. I also am still having the issue of images cutting off once I put the slideshow option on the checkout page.

On 11/5/2021 at 10:04 PM, smarret said:

Thank you! 

I tried this out, but I'm not sure if the code I had above works for this since it seems to not change anything when I put it in the header under html. I also am still having the issue of images cutting off once I put the slideshow option on the checkout page.

Hi,

Which code did you use?

I used what I had pasted above:

ProductItem-gallery-slides-item-image {

    object-fit: contain !important;

    object-position: middle;

    width: 100% !important;

    height: 100% !important;

    position: static !important;}

.tweak-product-item-gallery-aspect-ratio-34-three-four-vertical .ProductItem-gallery-slides::before {

    padding-bottom: 0 !important;}

.tweak-product-item-gallery-design-slideshow .ProductItem-gallery-slides-item {

    position: relative !important;}

Just tweaking the ratio as needed.

On 11/8/2021 at 7:52 PM, smarret said:

I used what I had pasted above:

ProductItem-gallery-slides-item-image {

    object-fit: contain !important;

    object-position: middle;

    width: 100% !important;

    height: 100% !important;

    position: static !important;}

.tweak-product-item-gallery-aspect-ratio-34-three-four-vertical .ProductItem-gallery-slides::before {

    padding-bottom: 0 !important;}

.tweak-product-item-gallery-design-slideshow .ProductItem-gallery-slides-item {

    position: relative !important;}

Just tweaking the ratio as needed.

Dear @smarret,

It seems like you solved the problem. Can you please share the solution/code? I am struggling with the same problem.

Many thanks. Sibylle