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
6915 1305 1333

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, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now