使图像适合HTML表格中的指定行高

Question

我有一个HTML表格，我想在其中放置一个像这样的标题：

   <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>​

我已将图像的高度指定为100％。然而，这是原始图像大小的100％，而我希望它是父元素的100％（因此表的高度为20％）。图像的宽度（以及单元格）应按比例调整大小。

有谁知道如何做到这一点？这是JSFiddle链接：http://jsfiddle.net/rbzej/

Answer 1

抱歉，但这是不可能的;尝试设置表格或单元格的高度只会影响最小高度，因为表格单元格的高度至少是内容所需的最小高度。由于您的图像指定100％高度，这是没有意义的，因为我们还不知道单元格的高度，因此使用图像的自然高度。