Images in Table Cells
 

I have a table of thumbnail images that can each be clicked on to see a
larger version or the image. The images are all different sizes.

I tried to set the dimensions of the cells with width and height parms
in the TR/TD/TH tags but they are overridden by the size of the image.

I tried the height and width parms in the IMG tag and some of the
thumbnails were distorted.

Is there some technique I can use for the thumbnails without having to
individually crop the images to the cell size.

Thanks....

Re: Images in Table Cells
 

While the city slept, MrC (MrC@Hotmail.hot) feverishly typed...

> I have a table of thumbnail images that can each be clicked on to see
> a larger version or the image. The images are all different sizes.

This is your problem.

> I tried to set the dimensions of the cells with width and height parms
> in the TR/TD/TH tags but they are overridden by the size of the image.

A table cell will always expand to accomodate the size of its content.

> I tried the height and width parms in the IMG tag and some of the
> thumbnails were distorted.

What else did you expect? If you expand or contract an image so that its
aspect-ratio is changed, then the image is going to look weird. If you
expand an image to larger than it actually is then it is going to pixelate -
the same can be true for squashing them. Those spare pixels have to go
somewhere! ;-)

> Is there some technique I can use for the thumbnails without having to
> individually crop the images to the cell size.

Not really I'm afraid. One technique I've seen is to physically crop the
image to a smaller size, so only a part of it is visible. While all your
thumbnails will be the same size, this can be confusing for the visitor, as
the full-size image is not the same as the thumbnail they selected. Also, it
will be difficult and time-consuming to accurately crop the images to
thumbnails that reflect the original, and make an interesting enough image
for the visitor to want to see the full size version.

As an alternative, are all the full size pictures you are referencing of the
same aspect-ratio (eg, 1:1.333, 300x400, 800x600, etc). If that is the case,
then make all your thumbnails the same length on the long side of the
picture (eg, for a 300x400 portrait format, shrink to 75x100. For a 400x300
landscape format, shrink to 100x75), then try and group your thumbnails in
an imaginative way in the table (eg, a row of landscape followed by a row of
portrait, or a portrait flanked by a landscape either side, then a landscape
flanked by a portrait either side on the next row). All your thumbnails will
be of a same or similar size, but the orientation will be different, so you
will be someway to a reasonably neat layout.

Hope that makes sense, and helps.

Cheers,
Nige

--
Nigel Moss
http://www.nigenet.org.uk
Mail address not valid. nigel@DOG.nigenet.org.uk, take the DOG. out!
In the land of the blind, the one-eyed man is very, very busy!

Re: Images in Table Cells
 

On Tue, 05 Oct 2004 12:45:51 -0400, MrC <MrC@Hotmail.hot> wrote:

: I have a table of thumbnail images that can each be clicked on to see a
: larger version or the image. The images are all different sizes.
:
: I tried to set the dimensions of the cells with width and height parms
: in the TR/TD/TH tags but they are overridden by the size of the image.


The img size takes precedence.


: I tried the height and width parms in the IMG tag and some of the
: thumbnails were distorted.

Of course it will distort, since the ratio of height:width is distorted. Do
this: specify height only, or width only, not both. The ratio is
maintained.

Sid

Re: Images in Table Cells
 

"Sid Ismail" <elsid@nospam.com> wrote in message
news:9746m0prvsd3blbmbcl0mltpfafgmc49kr@4ax.com...
> Of course it will distort, since the ratio of height:width is distorted.
Do
> this: specify height only, or width only, not both. The ratio is
> maintained.

Or just resize as you wish in an image editor - just editing the "height" or
"width" in the HTML is going to distort them in a quality sense anyway.