Image Height According To Table Height Stretch dynamic image height for dynamic table height

[BuffaloHelp 24]

I was in search for changing image height according to the table height.

 

I did not want to repeat the image using CSS or any other means (because the image was not designed for repeating--you can tell and it looks bad). And for whatever the reason I wanted to stretch one image according to the table height. And I decided on table instead of div because for this occasion using table was better than div.

 

So, table's height depended on the content I was filling in. Naturally I did not want to have table height fixed to a certain height all the time. Search the web got some answers, including Xisto which was very nice surprise, but it did not exactly do the trick.

 

Let's say that there is a basic table

 

<table>
    <tr>
         <td><img src="image/file_name1"></td>
         <td>(main content)</td>
         <td><img src="image/file_name2"></td>
    </tr>
</table>

 

We've all used somewhat similar frame for our websites. Basically the images refers to drop-shadow effect build around the main content, or image patters that frames the center box area.

 

What's useful about this situation is that if you set the first TD image height same as the second TD content height, the image without adjusting stretches to fill. And as I started off, maybe the image being stretched is better than repeating as the background image (for one reason or another).

 

So how do you know the content height when the content itself is dynamic--changing height value according to the content and not fixed height?

 

Solution is to find the height of the table as a browser renders the page. A short java script finds this value.

 

<script>
<!--
function imgHeight()
{
var height = document.getElementById('inner').clientHeight - 15;
return height;
}
// -->
</script>

 

var height = document.getElementById('inner').clientHeight - 15; where this "- 15" is to offset according to your design. The return value can be tweaked according to your website build.

 

Place the above script before HEAD portion of your page. And call this function like so

 

java script:this.height=imgHeight()

*the word is java script in one word--this forum splits into two due to a security protocal

 

Finally, putting them all together you get something like this with additional conditions

 

<table>
    <tr>
         <td valign="top"><img src="image/file_name1" width="20" onLoad="java script:this.height=imgHeight()"></td>
         <td>(main content)</td>
         <td valign="top"><img src="image/file_name2" width="20" onLoad="java script:this.height=imgHeight()"></td>
    </tr>
</table>

 

As the middle table cell expands and contracts the left and right table cell image will stretch accordingly without any issue. I realize that many of styles can be performed through CSS. And I place "td valign="top" to emphasize that the image should be aligned properly before being stretched to fulfill this effect.