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.
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.
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.
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.)
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.