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

woodpaz_books
Excursionist
17 0 3

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.

Reply 1 (1)

Dan-From-Ryviu
Shopify Partner
7549 1459 1455

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 or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now