Have Geek Brain

Forcing an image into a fixed div?

I am trying to scale an image 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 is on the right track is what I expect. However, in the bottom image, the image does not stay 100% on the table. Why doesn't the height decrease?

http://dl.getdropbox.com/u/139980/image%20size%20experiment/index.html

Thanks.

0


a source to share


3 answers


Apply height and width directly since you know the size of the tables.



<img src="imageName.png" width="20" height="20">
+1


a source


the overflow attempt is hidden in the div



overflow: hidden

0


a source


Okay, I have to say that I have never noticed this behavior before. I figured out a solution to your problem with Javascript. The only way I was able to do this with CSS was to indicate that I chose the same height and width of the image as the DIV.

Hence javascript sets the same height and width as the parent DIV of the image element. Hopefully this is 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 to get parentNode, but I'll let you understand :)

-1


a source






More articles:


All Articles