[davidklonski]

Hello

Assume I have a very large image that I would like to display.
I would like to place the image inside a table cell like so:

Code:

<table width="100% height="100%">
  <tr>
   <td width="150px">
      <!-- some content -->
   </td>
   <td width="100%">
      <!-- image goes here -->
   </td>
   <td width="150px">
    <!-- some content -->
   </td>
  </tr>
</table>

Even though the cell of the image has width 100%, I wouldn't want the table to get large enough for a horizontal scrollbar to appear.
Note, that the width of the image can be potentially very large.
I would like the browser to re-render the image in such dimensions so that the image will not be distorted, and no horizontal scrollbar will appear.
This means that the width of the drawn image will be as large as possible as long as no horizontal scrollbar is needed. Of course the height needs to be calculated correctly so that the image will not be distorted.

If the original width of the image is smaller than the available width for the table, just use the original width for the image.

is that possible?
I would appreciate any help in code.

[LJK]

Hi -
Why don't you just get the images to the correct size in your favorite graphics editor, then use CSS to make them backgrounds for the row/cell?

In case you're not sure how to start:
-give the tr or td a class or id name
-add the style to the selector:
td.lscape{background:transparent url(images/imagename.ext) no repeat;}

[preferably an external, linked stylesheet.]

good luck,
El

[ShadowCat]

<TD background="image.gif"> always works too! I'm not sure how to go about doing what you said, but check out pageresource.com and read their tutor on Detecting Screen Resolution. You and your images :-p.

PaYcE--->
-=Shadow*Cat=-