Image Distortion

Using Nop Traction Theme, do product images shown in categories need to be either square or have an aspect ratio that is larger horizontally than vertically?

The reason I’m asking is because our images of products when viewed in their category are distorted if the image is taller than it is wide.

I hadn’t noticed this distortion in the past, so I wasn’t sure if I had just missed it, or if I inadvertently changed something. I have recently changed to using Blob storage in Azure, so not sure if it is related, or if images always had to have a landscape ratio.

Thank you,
Shawn

Hi,

I could suggest a fix depending on what you want to achieve in the end. By default the theme is intended for square images, so if you have images with different dimensions, they are going to get distorted. 

Could you provide a link to your website, so that I could perceive the situation better ?

Thanks Aleks,

I was checking to be sure it wasn't caused by something that I did.

If your fix is easy, I would like to hear about it. Otherwise we will have to get busy and modify the aspect ratio on the distorted images.

The distortion only happens to images that are in a portrait aspect ratio. Square and landscape work fine.

Here is a section of our website with some distorted images (hiking poles)
http://www.adventuregear.ca/hiking-poles

Thank you,
Shawn

I found that there's a style that actually forcefully stretches the imagese, so basically removing it would fix the problem :)

The code you need to remove is:

.item-box .picture img {
    width: 100%;
}

Worked perfect! Thank you for saving me a bunch of work!

You are welcome! You can also contact us through our Ticketing system, if you are ever in need of more help :)