I’m using Refresh Theme. Products on my store have multiple product-images each. They are in an order such that the first image is a Portrait (Ratio 1:1.5) and other product images are Square (ratio 1:1). So, when I open a product page, The first preview image is shown tall and others are square. Is there a way to make the first tall image to scale down to a square ratio without cropping the image? I don’t mind having the black pillars on the sides of the first image.
Make all the preview images same width and height but without cropping any tall images. (requirement is similar to ScaleType=fitCenter on the android).
Thanks for the reply. Here is the URL for the dummy product having two product-images, first is the tall image and second is the square image. I want first image to be same width and height as the square ones. Want to scale the first image to fit into the same dimensions of the second without cropping any portion of the image.
I know one solution would be to create the first image as square in photoshop but that will make product-card(product listing shown on the homepage of the store) to be a square as well which I don’t want. So, editing image in photoshop will not solve the problem.
Make all the preview images same width and height but without cropping any tall images.
Please suggest a way to code this requirement in the refresh theme. Really looking forward to your reply.