Small product image is showing way too big

Some info on what I'm doing, I'm working on customizing a new zen cart install using my old store front's database. I looked at the product pages and have found a problem with the test site that the old site doesn't have. I don't know if it's a setting or something I've changed in an over ride folder or on the stylesheet on my old site. I'm trying not to use my old files because I want a fresh look and am starting over.

The small product images in my bookmarks category look huge and I don't know why. The image sizes are 22x80. I have the small image size in the admin set to 80. All of the other products have normal looking images using the actual image size. When I look at the source code of the image between the bookmark page and another product page they look the same.

Here are a couple of links to show the problem

https://aosnew.artofstitching.com/index.php?main_page=index&cPath=253_45_49
https://aosnew.artofstitching.com/index.php?main_page=index&cPath=253_192_213

Please don't judge the overall look. I haven't even started on customizing the template yet! hahaha

I believe you need to adjust

Configuration >> Images > Image - Product Listing Width
Configuration >> Images > Image - Product Listing Height

Ok. I've narrowed it down some. I'm now using zc version 2.0 using the bootstrap template. I used to use a different template. The other two templates, classic and responsive, allow the image to be shown at it's actual size. Bootstrap is forcing it to show at 100 width not 20, which causes the image to be much bigger. The medium and large sizes work fine.

I tested it by modifying one of the small product images to have a canvas size of 100 width and it now looks like it should, just with a wide white background. I can live with that, if that's the only way I can fix it but that means modifying a LOT of images for the products that I have.

Any suggestions on a way to fix the template files?

KarenLR:

Ok. I've narrowed it down some. I'm now using zc version 2.0 using the bootstrap template. I used to use a different template. The other two templates, classic and responsive, allow the image to be shown at it's actual size. Bootstrap is forcing it to show at 100 width not 20, which causes the image to be much bigger. The medium and large sizes work fine.

I tested it by modifying one of the small product images to have a canvas size of 100 width and it now looks like it should, just with a wide white background. I can live with that, if that's the only way I can fix it but that means modifying a LOT of images for the products that I have.

Any suggestions on a way to fix the template files?

Image Handler may help

Changing the image size with Image Handler won't work in this case. I can't change the original image size to 100 width. I have to alter the image itself so the image looks the same but the canvas size for that image is 100. It will have a white background on the sides.

I was hoping some coding in the template somewhere might take care of it since it works in the responsive template just fine. But, I have no idea where to start looking. I'll just put it on the back burner for now since I have so much else to customize.

Thank you for trying to help!

KarenLR:

Changing the image size with Image Handler won't work in this case. I can't change the original image size to 100 width. I have to alter the image itself so the image looks the same but the canvas size for that image is 100. It will have a white background on the sides.

I was hoping some coding in the template somewhere might take care of it since it works in the responsive template just fine. But, I have no idea where to start looking. I'll just put it on the back burner for now since I have so much else to customize.

Thank you for trying to help!
Actually, Image Handler supports a "fit-to-dimension" setting for the various image width/height. See this GitHub article for additional information: https://github.com/lat9/zen_Image-Handler/blob/master/pages/c_dimensions.md