Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Aspect ratio for product images


Dark_Ballad

Question

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
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Posted Images

2 answers to this question

Recommended Posts

  • 0

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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