relative image size nested in tables

snotmare · Sep 12, 2008

Greetings!

I am working on a web page that uses jsf to render the page. The resulting page is built with images nested within tables, so at this juncture, I have no choice but to use tables. The images need to be sized according to the size of the browser window. For instance, I need to fit 2 images across, so they'd each need to be sized at roughly 45% of the page width.

I've boiled the issue down to this simple example...

In this example, the image is sized to the width of the page. If you resize the browser window, the imaged is resized with it.

Code:

<html><body>
<img src="anyimage.jpg" width="100%">
</body></html>

In this example, the size of the image is static.

Code:

<html><body>
<table width="100%" border=1><tr><td width="100%">
<img src="anyimage.jpg" width="100%">
</td></tr></table>
</body></html>

Question #1:
I need to get the image to size proportional to the window when the window is resized.

Question #2:
As a side note, if the widths are set to 50%, you'd see the border of the table staying the original width while the image takes up half the cell. Any idea how to get the table size to be 50% with the picture?

Thanks for your help,
snotmare

---------------------
He who has knowledge spares his words, and a man of understanding is of a calm spirit. Even a fool is counted wise when he holds his peace; when he shuts his lips, he is considered perceptive. - King Solomon

Ascalonian · Sep 12, 2008

Question One:

Code:

  image{
    width: auto;
    height: auto;
  }

Something like that?

snotmare · Sep 15, 2008

Thanks for the response MikeyJudd, but unfortunately, it seems to have no effect.

Perhaps the issue is how I'm looking at it. When I give the image a width of 100%, I'm intending that to be 100% of the parent container (in this case a table cell, <td>). Instead, perhaps html really is understanding 100% to be 100% of the page or 100% the size of the original image???

---------------------
He who has knowledge spares his words, and a man of understanding is of a calm spirit. Even a fool is counted wise when he holds his peace; when he shuts his lips, he is considered perceptive. - King Solomon

vacunita · Sep 16, 2008

For question 1: I cannot for the life of me reproduce your error, even copying and pasting your code, and just substituting the image name. does not exhibit the behaviour in neither IE6 nor FF2. What browser are you using to test this?

Its there something else in your code your are not showing us?

Second if you have more than one image in more than one cell, then the cells should be 50% of the table but the images should always be 100% of their container (in this case the cell) unless you have more than one image in a single cell.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

snotmare · Sep 16, 2008

Hello vacunita, thanks for the response!

The code I provided above is the entire code that I was using as my miniture test. For me, the code in my second sample did not resize the images according to the size of the window. Instead, they were both full size, which pushed the table beyond the bounds of the window.

I have a co-worker who works in dreamweaver, she was able to take the table layout I had and get the images to size down to both fit within the window by. The only differences were that her images were 1 - on our http servers, and mine were on my local drive, and 2 - she took out the width attribute from the <td> tag. So, I took mine out to match hers, but I still had the same behavior as before. Thus, the only difference being the location of the images (both were jpgs). I cannot for the life of me think of a clear reason why her images resized and mine didn't.

At any rate, I will probalby end up calculating the needed image size and setting it explicitly (ie width: 100px

.

Thanks all for your input!

---------------------
He who has knowledge spares his words, and a man of understanding is of a calm spirit. Even a fool is counted wise when he holds his peace; when he shuts his lips, he is considered perceptive. - King Solomon

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

relative image size nested in tables

snotmare

Programmer

Ascalonian

Programmer

snotmare

Programmer

vacunita

Programmer

snotmare

Programmer

Similar threads

Part and Inventory Search

Sponsor