Image Height and Width for E-Commerce layout

HTML & CSS
1

Hi guys,

I have a question about the best way to display images in an E-Commerce CMS. I am not reinventing the wheel, I am using an existing CMS but I have had to significantly change the layout because of my particular needs.

Obviously the best way to hold data that repeats from line to line is in table cells, I kept this element from the original CMS. The main problem that I am having is that I don’t want any images to be stretched out of perspective, yet I want them to have a sense of uniformity.

Now, if I decide to keep the perspective I can set the height and width on each image preserving the order , most of my products are mobile phones which means that using a perspective which favors vertically orientated products works best for those.

However, what if I have products like tablets which are more horizontally orientated, if I have a fixed width product set up for horizontal products, then tablets look like they have been stretched vertically. Conversely if I only set a height and allow the image to set its own width accordingly, I risk spoiling the uniformity. I am much better with table-less CSS designs so I appreciate the knowledge of those who use tables more often on this topic.

Can any of you css gurus suggest a good methodology to follow?

2

you can easily set the image width and height in Drupal with modules.

3

Hey there,

Thanks for your response but I’m afraid I’m 8months into a project and I’m using Opencart as it was the one which best suited my needs. I have control over the height and width in the back office like with Drupal or any other Large Scale CMS but I don’t have the ability to deal with products of a different perspective on an individual basis.