Show varying image sizes in collection view

[terryohm]

Hi. My store sells framed prints. I am trying to show product images within the collection view that reflect the product dimensions and are proportionally correct.  i.e. I have varying sizes of the same print and I would like to make it visually obvious to the customer that there are different sizes available. This is how i would like to display my products:

However at the moment, Shopify is forcing the same width for all images. Is there a way via css or liquid to force the native image size to display ?  I'm using Dawn theme V11

Thanks for any advice!

[ThePrimeWeb]

Hey @terryohm

Can you share the link to your store please? Thanks!

[terryohm]

https://thewaltoncollection.ie/collections/michael-collins-by-leo-whelan-1922

thank you 

[terryohm]

any luck?

[ThePrimeWeb]

Hey @terryohm,

I have checked and unfortunately, this requires abit of extensive code, one which I can't really bundle up into an instruction set here. 

What you could do is to create an empty canvas of the same size for all images and paste the image of the product inside that canvas and resize just the image. Leave the empty spaces as white space. That way when you upload it to the product photo, the whitespace will be considered part of the photo and it will resize according to the canvas.

Like so, 

[terryohm]

I'll try that workaround. thank you very much for your help with this.