Fit image to specified row height in HTML Table

Question

I've got an HTML table in which I would like to place an image an a title like this:

   <table style="height: 500px">
        <tr>
            <td style="height: 20%"><img src="http://example.com/MgCHv2" style="width: auto; height: 100%" /></td>
            <td style="height: 20%">Some Random Title</td>
        </tr>
        <tr>
            <td style="height: 20%"><img src="http://example.com/MgCHv2" style="width: auto; height: 100%" /></td>
            <td style="height: 20%">Some Random Title</td>
        </tr>
        <tr>
            <td style="height: 20%"><img src="http://example.com/MgCHv2" style="width: auto; height: 100%" /></td>
            <td style="height: 20%">Some Random Title</td>
        </tr>
        <tr>
            <td style="height: 20%"><img src="http://example.com/MgCHv2" style="width: auto; height: 100%" /></td>
            <td style="height: 20%">Some Random Title</td>
        </tr>
        <tr>
            <td style="height: 20%"><img src="http://example.com/MgCHv2" style="width: auto; height: 100%" /></td>
            <td style="height: 20%">Some Random Title</td>
        </tr>
    </table>​

I've specified the height of the image to be 100%. This however, is 100% of the original image size whereas I want it to be 100% of the parent element (so 20% height of the table). The width of the image (and thus the cell) should resize proportionally.

Does anyone know how to accomplish this? This is the JSFiddle link: http://jsfiddle.net/rbzej/

Answer 1

Sorry, but this isn't possible; trying to set the height of a table or cell only affects the minimum height, because the height of a table cell is at least the minimum height required by the content. Since your image specifies 100% height, this is meaningless, because we don't know the height of the cell yet, so the natural height of the image gets used instead.