Forum Moderators: not2easy
So I set my page to 100% height and then made a table at 70%. I then divided the parts of the table (header information and footer) equaling 100%. It all seems to work at this point and everything scales as my browser changes (I am testing on Firefox 3).
However, when I add an [img] tag into the header and set its size to 100% width and height, the header no longer scales. It stays at a set hieght that doesn't change when I resize my browser. I cannot see why.
Can anybody help please.
CSS:
html, body
{
height: 100%;
}
.wrap
{
height:70%;
}
.header
{
height:10%;
}
.information
{
height:60%;
}
.footer
{
height:30%;
}
.images
{
height:100%;
width:100%;
}
HTML:
<table class="wrap">
<tr class="header">
<td colspan="2" class="header">
<img src="images/header2.png" class="images"/> </td>
</tr>
<tr class="information">
<td class="links">
Middle</td>
</tr>
<tr class="footer">
<td colspan="2" class="footer">
Botton</td>
</tr>
</table>
I'm using
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[edited by: Pluckerpluck at 4:12 pm (utc) on Jan. 14, 2009]
Technically, you can scale an image with CSS - but only in one direction, the way you are trying to do it. You can scale them using em's, but there are issues doing that. You can scale images also (sort of) with HTML. You often end up with some ugly looking images though either way. Some images - esp jpg - simply do not degrade well when squished that way, because you are not really resizing the image, just what shows up on the viewers screen.
The problem either way is that you have not reduced the image size, only what shows up. If you scale 2000px image down to 100px, when anyone downloads that page they are downloading the full 2000px image.
Here is a way to do, but it is generally bad practice to make drastic changes in size this way.
[w3.org...]
