Hi,
I'm trying to get an image to be scaled to the size of a table (unfortunately I need to keep the table) where the table is the same size as the div. Looking at the link below, the picture on the way right is what I expect. However, in the bottom picture, the image is not staying in its 100% sized table. Why doesn't the height get shrunk?
http://dl.getdropbox.com/u/139980/image%20size%20experiment/index.html
Thanks.
Well, I have to say I never noticed this behavior before. I have figured out a solution to your problem using Javascript. The only way I was able to do it with CSS is if I specified the same Height and Width to the image as the DIV.
Therefore, the javascript sets the same Height and Width as the parenting DIV of the image element. Hopefully this will be a viable solution for you:
<html>
<head>
<script>
function autoSize(i)
{
i.style.height = i.parentNode.parentNode.parentNode.parentNode.parentNode.style.height;
i.style.width = i.parentNode.parentNode.parentNode.parentNode.parentNode.style.width;
};
</script>
</head>
<body>
<div style="position: absolute; width: 400; height: 100;top: 200; left: 10;background-color: #CCCCCC">
<table width=100% height=100%><tr><td align=center valign=middle>
<img src="ImagePlaceholder.png" onload="autoSize(this)">
</td></tr></table>
</div>
</body>
</html>
There is probably a better way of getting the parentNode, but I'll let you figure it out :)
Apply height and width directly since you know the tables size.
<img src="imageName.png" width="20" height="20">