Jump to content
krdito

Product Listing Grid Distorts Images

Recommended Posts

I having been trying to figure this issue out for weeks and am finally asking for help! 

On my website, I have my products in each product category shown in a grid presentation, with 3 products per row.  I have noticed that my image (200x250) is distorted (looks longer and narrower than the actual image).  You can see the difference in the attached picture showing the grid view on the left and the picture shown when you click on the product on the right.  It seems like the "box" in which each product is contained on the grid is perhaps too tall, which distorts or spreads the image longer than the actual image size.  I have adjusted cell padding, etc., but can't make the image look like it should.  

Forgive my ignorance, but I am sure this is an easy fix that I just can't seem to work out.  Thank you for your help!

 

distortedimage.jpg

Share this post


Link to post
Share on other sites

Make all your images the same size. Try not to force the browsers to adjust the size of the images. Generally square images work better. If you really are using 2.3.3 its really old and there is a better system available. Look in your admin area for image size settings and remove one of either the horizontal or vertical image dimensions. That will allow images to be either a fixed height to the image proportions, or a fixed width to the image proportions.


REMEMBER BACKUP, BACKUP AND BACKUP

Get the latest Phoenix version here

It's easy to say to yes every question.

Share this post


Link to post
Share on other sites
2 hours ago, 14steve14 said:

Make all your images the same size. Try not to force the browsers to adjust the size of the images. Generally square images work better. If you really are using 2.3.3 its really old and there is a better system available. Look in your admin area for image size settings and remove one of either the horizontal or vertical image dimensions. That will allow images to be either a fixed height to the image proportions, or a fixed width to the image proportions.

I removed the horizontal image dimension in the admin panel, and it made the distortion significantly worse.  I "undid" that and removed the vertical image dimension, and had the same worsening of the distortion.  Am I understanding correctly that it is a browser issue?  Is there a way to prevent browsers from adjusting the size of the images?  The current distortion isn't horrible, but it makes the products look taller and narrower that the actual image.

 

I am an older lady and am scared of updating to a better system, likely because I don't know anything about it (have learned the current version over the 17 years I have run this site).  The last time there was a major change in versions, I had to have the site completely rebuilt.  Perhaps it is not a good thing to try to get along with the current version...I don't know?!

Share this post


Link to post
Share on other sites

I looked at my site in different browsers, and the pictures are fine in Firefox, but become distorted in Google Chrome and Microsoft Edge.  I need to investigate if there is a way to prevent these browsers from adjusting the size of the images.

Share this post


Link to post
Share on other sites

Removing one of the dimensions should make the image better as only one dimension is being forced to resize.  I would make all the images the same size and try again.


REMEMBER BACKUP, BACKUP AND BACKUP

Get the latest Phoenix version here

It's easy to say to yes every question.

Share this post


Link to post
Share on other sites

All of my product images are 200x250.  When go into the Admin Panel -> Configuration ->Images and delete the image width (that is, removing the 200 and leaving the filed blank), I get significantly worse distortion, extending outside of the product's "box."  The same thing happens if I add back the image width and remove the image height.  

distortedimage_2.jpg

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×