Reputation: 33
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/
Upvotes: 3
Views: 3758
Reputation: 55432
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.
Upvotes: 3