3

我有一个 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/

4

1 回答 1

3

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

于 2012-06-07T20:52:03.830 回答