I would like to request your assistance with an issue concerning the picture thumbnail on our platform. It seems that the thumbnail image is not fitting properly, causing it to appear cut.
Could you please look into this and help adjust the image to fit appropriately? Your prompt attention to this matter would be greatly appreciated.
Hi @Sheeks ,
I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!
Step 1: Go to Admin → Online store → Theme > Edit code:
Step 2: Search for the file base.css. And add this code snippet to the end of the file.
.main-product-thumbnail-img img.lazyautosizes.ls-is-cached.lazyloaded {
object-fit: contain !important;
}
Step 3: Save and reload home page.
=>> The result:
I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.
Have a nice day sir!
Hi @Sheeks
Check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
.main-product-thumbnail-img img {
object-fit: contain !important;
}
And Save.
result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
To fix the thumbnail image cropping issue:
-CSS Fix: Use object-fit: contain; or cover; on the thumbnail class in your CSS file to adjust how the image fits.
If you need specifics on finding the class or exact CSS tweaks, let me know!
