Making a table with images fit the screen

[Cogito]

The following code:

<table border="3" cellspacing="2" cellpadding="0" align="center">
<tr>
<td align="center" valign="middle"><img src="image1.gif"
width="440" height="271" border="0" alt=""></td>
<td align="center" valign="middle"><img src="image2.gif"
width="440" height="271" border="0" alt=""></td>
</tr>
</table>

show the two images nicely on my screen. That is, it fits the width of
my screen with the resolution I'm using. How can I make it have the
same appearance on screens with lower resolution?

 

[brucie]

in post <Cogito said:

<table border="3" cellspacing="2" cellpadding="0" align="center">
<tr>
<td align="center" valign="middle"><img src="image1.gif"
width="440" height="271" border="0" alt=""></td>
<td align="center" valign="middle"><img src="image2.gif"
width="440" height="271" border="0" alt=""></td>
</tr>
</table>

show the two images nicely on my screen. That is, it fits the width of
my screen with the resolution I'm using. How can I make it have the
same appearance on screens with lower resolution?

add width="100%" to the table and change the width of the images to
100%. now your images are going to look crap because browsers are poor
at resizing images. also have a look at using CSS, its the 21 century.

 

[Cogito]

Can you please show me how to do it with CSS?

in post <Cogito said:



add width="100%" to the table and change the width of the images to
100%. now your images are going to look crap because browsers are poor
at resizing images. also have a look at using CSS, its the 21 century.

 

[Cogito]

in post <Cogito said:



add width="100%" to the table and change the width of the images to
100%. now your images are going to look crap because browsers are poor
at resizing images. also have a look at using CSS, its the 21 century.

I tried your solution without much success. The images are now
enormous and do not fit the width of the screen...

 

[brucie]

Can you please show me how to do it with CSS?

just put them in a <div> with each image 50% width.

http://moreshit.bruciesusenetshit.info/image-thingy-1.html

no CSS is needed except IE is a crap browser so you need some CSS to fix
it.

http://moreshit.bruciesusenetshit.info/image-thingy-2.html


please don't toppost

How am I supposed to post my replies in a newsgroup?:
http://allmyfaqs.com/faq.pl?How_to_post

 

[brucie]

I tried your solution without much success. The images are now
enormous and do not fit the width of the screen...

then you did something wrong or something went wrong with my mind
reading device.

http://moreshit.bruciesusenetshit.info/table-image-thingy.html

 

[Cogito]

then you did something wrong or something went wrong with my mind
reading device.

http://moreshit.bruciesusenetshit.info/table-image-thingy.html

Thanks for you reply.
The code works well with two images that are relatively small and are
enlarged to fit the screen size. In my case I have two larger images,
and they remain far too large.
Any suggestions?

 

[brucie]

The code works well with two images that are relatively small and are
enlarged to fit the screen size. In my case I have two larger images,
and they remain far too large.

you are doing something wrong and i'm really sick of trying to read your
mind.

using two images 600px wide:

using css:
http://moreshit.bruciesusenetshit.info/image-thingy-3.html

using a table:
http://moreshit.bruciesusenetshit.info/table-image-thingy-2.html

a screencap of about 260px wide:
http://moreshit.bruciesusenetshit.info/screencap001.png [1.2k]

a screencap of about 4360px wide:
http://moreshit.bruciesusenetshit.info/screencap002.png [2.3k]

as you can see the images automatically adjust to the window width
available.

 

[Steve R.]

Cogito wrote in message ...

The code works well with two images that are relatively small and are
enlarged to fit the screen size.

Try this below., but firstly I've resized the width of you images to no more
than 350 pixels wide each, as you'll need to use the horizonatl scroll bar at
800x600, with your original ones

I'd also be inclined to hide the table border and use a small border on the
images instead.

<center>
<table border="3" cellpadding="2" cellspacing="0" width="100%">
<tr>
<td width="50%" align="center"><img src="image1.gif"
width="350" height="271" border="1" alt=""></td>
<td width="50%" align="center"><img src="image2.gif"
width="350" height="271" border="1" alt=""></td>
</tr>
</table>
</center>

Steve.

 

[Cogito]

This code works well.
Thank you.

Cogito wrote in message ...

Try this below., but firstly I've resized the width of you images to no more
than 350 pixels wide each, as you'll need to use the horizonatl scroll bar at
800x600, with your original ones

I'd also be inclined to hide the table border and use a small border on the
images instead.

<center>
<table border="3" cellpadding="2" cellspacing="0" width="100%">
<tr>
<td width="50%" align="center"><img src="image1.gif"
width="350" height="271" border="1" alt=""></td>
<td width="50%" align="center"><img src="image2.gif"
width="350" height="271" border="1" alt=""></td>
</tr>
</table>
</center>

Steve.