View Larger Image Aspect Ratio not preserved

[lynbor]

[Note: remember to include site URL, ZC version, list of plugins, PHP version, etc ... read the Posting Tips shown above for information to include in your post here. And, remove this comment before actually posting!]

OK, so I'm upgrading from 1.55 and decided to just do a clean install and move my products over. I needed the store to also be recursive now. I chose to use ZCA-Responsive-Classic-for-Zen-Cart-1.5.6-v1.0.0 template which installed without a hitch. I used DbIo for moving my products and categories over. Had a little trouble with that but got it worked out through the support thread.

But now I'm noticing that when I click on "View Larger" the window that pops is distorted. I've been reading through here trying to find a solution that does NOT involve me making a bunch of changes to my existing images. My images are all at 800x600 96dpi resolution which has worked well for me for years. The thumbnails all look good and on my 1.55 installation when clicking on "View Larger" the original size of 800x600 was popped up in a new window.

But in my new install I'm getting a pop up that is like 240 x 600. I can expand the window it's in and it will end up displaying the 800x600 image without distortion so it's the window size that is the problem, not that the image is being resized. And I can't seem to find where or how to fix this.

I would greatly appreciate any assistance that doesn't involve installing a 3rd party plugin/addon AND doesn't involve me doing the _MED, _LRG filenaming stuff. I just need that pop up window to size to whatever the image size is. Here is what I'm getting and want to fix.



and here is how it looks in the old v1.55 using the same image file.



Appologies if this should have been posted in the template support section. I just wasn't sure this was a problem with the template or was a site setting somewhere.

[IATIA]

I had the same issue quite some time ago. If I can hunt up the solution later today, I'll post it for you.

[mc12345678]

If you configure your images settings the same in this store as they were in your previous version (would already be that way if the database upgrade had been performed as recommended rather than installing other software to move products and the like), does the problem persist?

[IATIA]

I couldn't find the info and I do not remember my solution. I had a thread on the same issue, but it was unresolved.

[dbltoe]

I've often found that this is caused by a setting somewhere that defines both height and width. It is usually incorrect like having 240 x 600 when all your images are 900 x 600. If you are getting a lot of the 240 images, you might want to find that define and change it there.

And, had you followed the instructions in the first line of your post (a URL) we might be able to look closer.

[IATIA]

And a link to the erroneous pic.

[lynbor]

Ok, URL = https://tinyurl.com/y4h29jo6 (tiny because I don't really want the domain to end up in google from here)

Look at the larger image of any product and you'll see the same issue.

The pop-up is setting image wide and letting height be whatever it is. It should NOT be setting image width or height on this pop-up image, IMHO. That is what I want to stop it from doing at any rate. I suspect a CSS setting somewhere. ALL of these images were/are being used in the older ZC installations that they came from and in a completely different (non-recursive) template and are of a size that I want them to display.

Upgrading databases was not going to happen and I realize I "could have" upgraded both installations first and then performed a merge of data choosing one installation and merging data from the other. (All kind of besides the point.)

My HOPE was that a new fresh installation would be less likely to contain problems than upgrading an installation that has been upgraded several times over the years and already having issues of it's own. Not to mention older possibly not updated templates and maybe plugins, etc.

There just was not "easy" way to do what I wanted to do so I did it the way that made the best sense to me. And not my first rodeo here. Appreciate any and all assistance in finding and resolving this minor but annoying display issue.

[raptar]

Hi Lynbor. Look in your stylesheet.css look for line 15, which is for img. Add add height:auto; to it. It makes the image responsive.
Regards raptar

[dbltoe]

You might want to explore the differences between height:auto and height:##%.

Height:##% can often provide more control if the image is in a container.

[dw08gm]

Also max-width and max-height.