在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％的高度，这是没有意义的，因为我们还不知道单元格的高度，所以图像的自然高度被用来代替。