[RESOLVED] How to force an image to "behave relative"?

[discus]

Hi all

I have a problem with a pic sizing.

If i put some pic in a table cell which has relative size of say 20%, it looks fine in resolution 1024x800 (17"), however if i open the same page in 800x600 (15") res, the picture refuses to decrease its size proportionally but keeps its original size (in pixels) means it pushes objests in cells around to get space for itself.

How to force an image to "behave relative" ?


Thanks

[ray326]

I guess you might tell it it's a block and size it in percentages.

[discus]

Can you please give me a short example of how to do it.


Thanks a lot :)

[ray326]

td img { display:block; width:65%; height:65%; }

[discus]

Thanks, I'll try.

[discus]

Unfortunately it didn't help much, i suppose because i don't know what i'm actually doing. :(

If i put say 50% in your code, which 50% (what 50% of) it is?

All my pics became smaller and i get a lot of empty space.

What i need is to bind picture width, with the screen width.

For example, a picture width should be 15% of the screen width (something like a relative table is 100% of the screen width) no matter of picture actual (pix)size, so i'd get the same layout in 1024x768 as well in 800x600. Height should follow the width proportionally.

Thanks

p.s.
Is there some techique to get exactly the same layout no matter of screen resolution, means to avoid any pix dimension in html code and to use only percentages instead. So a picture dimensions (width) could be given as a cell percentage, and cell dimension as a table percentage?

[ray326]

If you put it in a table cell then the only reference it has is the table cell.

[mark_yieh]

you have to set the width property for the img tag also. For example:

<table width="100%" cellpadding="0px" cellspacing="0px" border="1px">
<tr>
<td width="20%">
<img src="nameOfImage.jpg" width="100%" />
</td>
</tr>
</table>


That way the td tag is 20% of the table tag and the img tag is 100% of the td tag which makes it also 20% of the table tag. If you don't specify a width for the img tag, then it's going to take on the full size of the image and take up whatever space is needed to display that image.

[discus]

Huuh, THAT could be it !! :eek:

I'm going to try it out, and will let you know.

Thanks

[discus]

mark_yieh, i cannot thank you enough.

It works perfect. :)

[WebJoel]

(sigh...) reading down through this thread I was coming to the same idea and conclusion and was eager to post my suggestion, ---and see that it was already offered, and that the problem is resolved. Nice solution, btw! We've got some crafty people on here! :D