Collection grid resizes images instead of cropping - Theme: Elise

[kgindesg]

Hi

I show a grid of products on my webshop that makes all images 1x1

However, instead of cropping the images into this aspect ratio, they are resized and stretched to look quite bad. 

I have changed many of the pictures by simply editing them, but for others I would like them not to be 1x1 on the product page itself

Is there any way I can make my 1x1 apsect ratio grid crop them instead of resizing?

This is the URL:
https://t-house.dk/collections/specialte

Thank you all in advance

 

[ErSanjay]

@kgindesg   you can edit your code inside the collection file 

<img src="{{ block.settings.about-slider-image | img_url: 'master' }}" class="img-fluid" alt="about image">

 img_url: 'master' }}" class="img-fluid"

master, large, small those are different sizes from Shopify.   you can specify the image size.


find the code  inside the section/collection-tempalate.liquid 

 <div class="collection-hero__image" style="background-image: url({{ collection.image | img_url: '2048x600', crop: 'top' }});"></div>

your theme code look like 

img_url: '2048x600', crop: 'top'

remove a crop parameter and replace the image size you want 

<div class="collection-hero__image" style="background-image: url({{ collection.image | img_url: '300x400' }});"></div>