Automatically Resize Images in Collection Lists To Fit Properly (Zooming Out & Adding White Space)

woodpaz_books · ‎01-25-2024

Hello,

Is there a way to code so that in collection view images of products are resizes automatically so not to cut anything off? Can it be coded so that when an image is too big so that it has to be trimmed at the edges, the code would automatically zoom the image out to fit and add white space where the image would be lacking from the frame?

I'm using the Dawn Theme.

Many thanks in advance.

Dan-From-Ryviu · ‎01-25-2024

Hi @woodpaz_books

You can add this code to your theme.liquid file after <head>, in Online store > Themes > Edit code, and check if it works

<style>
.card__media .media img {
    object-fit: contain !important;
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Automatically Resize Images in Collection Lists To Fit Properly (Zooming Out & Adding White Space)

Automatically Resize Images in Collection Lists To Fit Properly (Zooming Out & Adding White Space)

Community Blog Articles