Different size Product (images)

Meeeee · March 29, 2020

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

Edited March 29, 2020 by Meeeee

tuanphan · March 29, 2020

Can you share link to page in screenshot?

Meeeee · March 30, 2020

@tuanphan jalley.art pw:testtest

tuanphan · March 30, 2020

.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;
}

Meeeee · March 30, 2020

thanks @tuanphan would this be for the product pages/tag link results?

Edited March 30, 2020 by Meeeee

Meeeee · March 30, 2020

@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 March 30, 2020 by Meeeee

Meeeee · March 30, 2020

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;
}

Meeeee · March 30, 2020

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

Edited March 30, 2020 by Meeeee

Meeeee · March 30, 2020

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.

Edited March 30, 2020 by Meeeee

AdeleThomas0 · August 25, 2020

This was helpful! Thank you! Did you ever figure out how to make the images look center?

tuanphan · August 27, 2020

On 8/26/2020 at 5:36 AM, AdeleThomas0 said:

This was helpful! Thank you! Did you ever figure out how to make the images look center?

If you share site url, we can take a look

Different size Product (images)

Question

Meeeee 23

Link to post

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

Meeeee

Posted Images

10 answers to this question

Recommended Posts

tuanphan 9,305

Link to post

Meeeee 23

Link to post

tuanphan 9,305

Link to post

Meeeee 23

Link to post

Meeeee 23

Link to post

Meeeee 23

Link to post

Meeeee 23

Link to post

Meeeee 23

Link to post

AdeleThomas0 0

Link to post

tuanphan 9,305

Link to post

Create an account or sign in to comment

Support

Community

Developers

Resources