Aspect ratio for product images

Site URL: https://darkballaddesigns.com/shop-all/art

Hello,

Can someone please help me with code to make my pictures each appear in their original aspect ratio on both desktop and mobile? Im aware this isnt a default option but since i sell artwork on my page, i need pictures to appear in many different shapes and sizes. 

I need this to work on the 'Shop all', 'Art' pages and i also need it on the page after you click on the thumbnail.

As it is at the moment, all picturee are in portrait but that doesnt work for me.

Any help appreciated.

Cheers.

Remove all CSS & try this new CSS

img.grid-item-image.grid-image-cover {
    object-fit: contain !important
}

img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important
}
@media screen and (min-width:768px) {
.grid-image-wrapper {
    padding-bottom: 100% !important
}
}
img.grid-item-image.grid-image-cover {
    bottom: 0 !important;
    top: unset !important;
    height: auto !important
}

1 hour ago, tuanphan said:

Remove all CSS & try this new CSS

img.grid-item-image.grid-image-cover {
    object-fit: contain !important
}

img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important
}
@media screen and (min-width:768px) {
.grid-image-wrapper {
    padding-bottom: 100% !important
}
}
img.grid-item-image.grid-image-cover {
    bottom: 0 !important;
    top: unset !important;
    height: auto !important
}

 

Hey,

This code has only fixed the mobile issue. it still clips the pictures in the desktop version. I will attach pics. We are so close! just this one issue left.