Display Images In Table

HTML & CSS
1

I am trying to display same size images in table cells . The problem I am having is that in Firefox if the image is square, it appears elongated in IE, Chrome, Opera and Safarie. If I try so specify a height to make the image square in IE, Chrome,Opera and Safaire it renders elongated in Firefox. It is exasperating to say the least.

The latest version of my code is:

I know that this may be hard to understand, but if anyone has a solution I would be appreciative of hearing it.

Thank you

2

I am trying to display same size images in table cells . The problem I am having is that in Firefox if the image is square, it appears elongated in IE, Chrome, Opera and Safarie. If I try so specify a height to make the image square in IE, Chrome,Opera and Safaire it renders elongated in Firefox. It is exasperating to say the least.

The latest version of my code is:

<td class='xxx' style="height:50%; width: 25%">
                    <img src='images/products/{$type}/{$array_item}' alt='' class='product_image' height='100%' width='100%'
                         onClick='lightBox(src="images/products/{$type}/{$array_item}",
                                    "{$type}",
                                  "{$smarty.foreach.array_items.index}",
                                  "{$product_items}",
                                    "{$height[{$smarty.foreach.array_items.index}]}",
                                  "{$diameter[{$smarty.foreach.array_items.index}]}",
                                  "{$material[{$smarty.foreach.array_items.index}]}",
                                  "{$cost[{$smarty.foreach.array_items.index}]}")'>
                </td>

I know that this may be hard to understand, but if anyone has a solution I would be appreciative of hearing it.

Thank you

3

Hi enginemike, your code or link to is missing.
Or, can you put it up at jsFiddle.net or codepen.io and give the link?

4

That server code isn’t to much help I’m afraid. :smile:

Can you take the generated code and post that instead?

5

Why are you setting height=“100%”? Surely that is causing issues for the images. Same with width=“100%”. It will probably scale the image up as well. Why not just set the width/height to the actual dimensions? Assuming they are all the same.

6

Are all your images the same size to start with?

If they are not the same size then they at least need to be the same aspect ratio otherwise when you re-size them they will get stretched differently.

If you can make a live small demo then we can offer some specific help. It shouldn’t take you long to knock up a stand-alone demo on codepen linking to a few of your pictures.

(Also sizing table-cells is not straight forward and some browsers won’t base their content on the height of the cell either especially when the height of the cell depends on said content.)

7

Thank you for the response. Alas today is a work day so I will not be able to get back to this until this evening.

Things have changed a bit. I have never used fiddle before so I am trying to figure that out. One thing I notice is that if I copy the code over to fiddle the the table closure shows in red, which to me indicates an error, but I do not see that when I dump the source. Another mystery.

Re the images, they are to display same size in the table, but are physically larger than the table display as I am using them elsewhere at a larger size, hence my use of height and width controls.

Anyway, thanks a ton. I will be back this evening.

8

All

I solved my problem.

In the style sheet I set the width of the <td> and the width of the <img> tags. Now the site works as it should. Or at least intended.

Thanks a lot for your help. Your comments gave me the clue.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.