2

I'm attempting to make an image take all the remaining width available for a table and span the entire height of a table without extending it any further, with overflow:auto to scroll if there's not enough height.

The width bit is easy, but no matter what I do the table cell containing the image will extend the height of the table. Is there a way to prevent this, short of explicitly setting the image's height?

Cory Nelson
  • 29,236
  • 5
  • 72
  • 110

3 Answers3

1

Thus far the solutions I've found differ on browser, so aren't ideal. You could render different markup based on the client. (But still looking for a more universal answer.)

Updated again for the most universal solution so far:

<style>
    div.ImageBlock
    {
        height:100%;
        width:100%;
        left:0px;
        top:0px;
        overflow:auto;
    }
    div.IE_CompatMode
    {
        position:absolute;
    }
</style>

Either works in Chrome, and the IE_CompatMode has to be added when IE has compatibility mode On.

<td rowspan="2" style="position:relative;">
    <div class="ImageBlock [conditional:]IE_CompatMode">
        <img src="Images/Jellyfish.jpg" style="position:absolute; top:0px; left:0px;" />
    </div>
</td>

And nothing (that I've yet tried) works in Firefox.

Mike Guthrie
  • 4,029
  • 2
  • 25
  • 48
0

You would have to use a wrapper element around the content to restrict the height.

<table>
    <tr>
        <td><div class="overflow">This is short.</div></td>        
        <td><div class="overflow">This is longer.</div></td>   
        <td><div class="overflow">This is really long and repeated. This is really long and repeated.</div></td>           
    </tr>
</table>

.overflow {
    max-height:40px;
    overflow:hidden;
}

var tableHeight = $('table').height();
$('.overflow').css('height',tableHeight + 'px');
Matthew Darnell
  • 4,538
  • 2
  • 19
  • 29
  • Explicitly setting the height is exactly what I want to avoid. I'm trying to make the image's height be equal to the table height (taking other rows into account), without expanding it any more. – Cory Nelson Apr 05 '12 at 15:55
  • You can set the height however you want. I'll add JS to show how to pull it from the table. You need an explicit height in order for overflow to work. – Matthew Darnell Apr 05 '12 at 15:57
0

Could always give the image a percentage e.g. height="100%" that should make it the full size of the cell that it is in but would restrict overflow.

Andrew
  • 35
  • 7