Jump to content

Aspect ratio for product images

Recommended Posts

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.

 

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

 

 

Screenshot_20210906-215643_Samsung Internet.jpg

Screenshot_20210906-215749_Samsung Internet.jpg

Edited by Dark_Ballad
edited pics
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.