How can I adjust zoomed-in product images on my site?

[Dike]

Hello everyone,

Almost all of my product images look very zoomed in before clicking on them, like this:

This is a bottle but it's hard to tell if you don't click on it.

How can I adjust my pictures to show the whole outlining?

Thank you so much!

[LitCommerce · Accepted solution]

Hi @Dike,

You can change it to get the images you want. 🙂

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

[Dike]

 Is this possible?

[LitCommerce]

Hi @Dike,

Please go to Customize > Featured collection > PRODUCT CARD > Image ratio > Adapt to image. Refer https://i.imgur.com/Q0IL0bq.png 
You can resize it here.
Hope it helps!

[Dike]

Thank you for your reply!

I've tried this but this makes the images look huge. Not all images are the same size so the row of images wont be linear either.

Example: 
If you have any idea on how to fix this, I would greatly appreciate it!

[LitCommerce]

Hi @Dike,

Because your images have different size, it will be difficult to display well for all, you can add the following code, it will help to display better now.

Go to Assets > base.css and paste this at the bottom of the file:

.card--product .media {
    padding-bottom: 120% !important;
}

Hope it helps!

[Dike]

Thank you so much. This definitely helped portray the products more clearly!

But it also made the pictures too big, and too narrow. If this could be tweaked than I could maybe play with the numbers to get the perfect fitting.

[LitCommerce · Accepted solution]

Hi @Dike,

You can change it to get the images you want. 🙂

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

[Dike]

Hey LitCommerce,

I accepted this as a solution, thank you!

But I was hoping if you could tell me the code to add padding to the width instead of the bottom, as my pictures are longer than the width. I think this would solve it?

Thank you so much.

[LitCommerce · Accepted solution]

Hi @Dike,

With width, please change code:

.card--product .media img{
    right: 0 !important;
    margin: auto;
    width: 70% !important;
}

Hope it is clear to you.

[Dike]

Thank you once again. This helped tremendously!

[LitCommerce]

Hi @Dike,

If you have any difficulty, you can contact me 🙂

Happy to help you.