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

Different size Product (images)

Asked by Meeeee

Question

Meeeee    18

Meeeee
Posted (edited)

Hi all, 

In Design -> Product Items -> Aspect Ratio it gives you just a single option.  The problem that I'm having is that some images on a website i'm building are (generally) either 4:3 or 3:2, shot natively on different cameras.  Is there a better way to address this so images maintain their original aspect ratio and don't follow this setting?

I found this post and some code: 

.summary-thumbnail-image.loaded {
    object-fit: contain !important;
    object-position: top;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
  padding-bottom: 0px !important;
  margin-bottom: 0px !important;
}

.sqs-block-summary-v2 .img-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 0px !important;

But it doesn't affect product details page...see attached screenshots.  

Thanks for your help!
J

 

Screenshot 2020-03-29 17.01.05.png

Screenshot 2020-03-29 17.01.18.png

Edited by Meeeee

Share this post

Link to post

8 answers to this question

Recommended Posts

  • 0

tuanphan    7,083

tuanphan
Posted 
.ProductItem-gallery-slides-item-image {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
.ProductItem-gallery-slides-item.selected.going-next.loaded {
    padding-bottom: 50% !important;
}

 

You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post

Link to post
  • 0

Meeeee    18

Meeeee
Posted (edited)

@tuanphan not sure it works -- see site.  It still crops at the bottom of the 4:3 image to 3:2 size.  Granted in design setting it does show the aspect ratio is 3:2. But if I set to 4:3 I have the opposite effect.  

 

 

Edited by Meeeee

Share this post

Link to post
  • 0

Meeeee    18

Meeeee
Posted

Okay -- so when I changed the height to width, that actually seems to help my cause.  Not perfect, but pretty close.   

.ProductItem-gallery-slides-item-image {
    width: auto !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
}
.ProductItem-gallery-slides-item.selected.going-next.loaded {
    padding-bottom: 50% !important;
}

Share this post

Link to post
  • 0

Meeeee    18

Meeeee
Posted (edited)

sorry for so many followups, but the only downside is that in mobile it doesn't look great and is bit off center.  

Screenshot 2020-03-30 00.15.35.png

Edited by Meeeee

Share this post

Link to post
  • 0

Meeeee    18

Meeeee
Posted (edited)

I wanted to continue to update this as it seems I'm not the only one with this issue.  I came across the "auto" aspect ratio in 7.1 when doing a product summary block, which is fantastic.  I'm not sure why it can't be included in default options, because when you then click on the image itself, it has the default setting, which looks not great.  

Screenshot 2020-03-30 18.01.07.png

Screenshot 2020-03-30 18.01.43.png

Edited by Meeeee

Share this post

Link to post

Create an account or sign in to comment

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

Sign Up / Login
Go To Question Listing
×
×
  • Create New...

Support

Community

Developers

Resources