How to hide the 'previous' gallery slide image in mobile view

Hi,

I've changed the displayed image ratio of my shop's gallery slide image using the following CSS code:

/* product images */
img.pdp-gallery-slides-image {
   object-fit: contain !important;
}

When images have different ratios, I can see the 'previous' images behind/below the currently displayed image as seen in the image attached. Is there a way to prevent this from happening?

OR:

Would it be possible to automatically adjust the wrapper's/container's height to the height of the current slide image, no matter the ratio? 

password for site access: hello@yumi72

Thanks in advance!

1 hour ago, Flotzi said:

Hi,

I've changed the displayed image ratio of my shop's gallery slide image using the following CSS code:

 

/* product images */
img.pdp-gallery-slides-image {
   object-fit: contain !important;
}

 

When images have different ratios, I can see the 'previous' images behind/below the currently displayed image as seen in the image attached. Is there a way to prevent this from happening?

OR:

Would it be possible to automatically adjust the wrapper's/container's height to the height of the current slide image, no matter the ratio? 

 

password for site access: hello@yumi72

 

Thanks in advance!

Can you share your website URL?

of course:

https://www.yumiweaves.com/shop/p/dolores

password for site access: hello@yumi72

5 hours ago, Flotzi said:

of course:

https://www.yumiweaves.com/shop/p/dolores

password for site access: hello@yumi72

I can't see the gallery slide

The format is set to "wrap". So the slide only appears in mobile view or if you make your browser window really narrow.

this is working perfectly! thank you so much! 💥

alternatively, would it be possible to keep the "object-fill" at "cover" and increase the height of the "container'/gallery? at the moment the gallery's resolution is 1:1. Is there a way to change that, maybe to 3:2 ?

6 hours ago, Flotzi said:

this is working perfectly! thank you so much! 💥

 

alternatively, would it be possible to keep the "object-fill" at "cover" and increase the height of the "container'/gallery? at the moment the gallery's resolution is 1:1. Is there a way to change that, maybe to 3:2 ?

 

Replace the pervious code with the code bellow. 

@media screen and (max-width: 767px) {
    .pdp-layout .pdp-gallery-images::before {
        padding-bottom: 130% !important;
    }
    .view-item .pdp-gallery .pdp-gallery-slides img {
        object-position:top !important;
        object-fit: contain !important;
        visibility: hidden
    }
    .view-item .pdp-gallery .pdp-gallery-slides.selected img {
        visibility: visible !important
    }
}