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

Posted 2023-03-05

【中文标题】使图像适合 HTML 表格中的指定行高

【英文标题】：Fit image to specified row height in HTML Table

【发布时间】：2012-06-11 22:28:51

【问题描述】：

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

【参考方案1】：

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