根据表格行的大小更改图像的大小

Question

我有一些看起来像这样的东西：

<table>
    <tr><td><img src="..." /></td><td>data</td><td>data</td><td>and more data</td></tr>
    <tr><td><img src="..." /></td><td>data</td><td>data</td><td>and more data</td></tr>
    <tr><td><img src="..." /></td><td>data</td><td>data</td><td>and more data</td></tr>
    ...
    <tr><td><img src="..." /></td><td>data</td><td>data</td><td>and more data</td></tr>
    <tr><td><img src="..." /></td><td>data</td><td>data</td><td>and more data</td></tr>
 </table>

如果可能的话，目标是使图像“有点”调整行的大小。 比方说，图像大小为200x200（以px为单位）。我希望图像缩小到100px，如果它的行比图像的大小更薄（它没有图像）。 例如：

• 如果没有图像，行的高度<100px，带图像，则高度为100px
• 如果没有图像，行的高度为140px，带有图像，则它的高度保持在140px
• 如果没有图像，行的高度为200px，带有图像，则它的高度保持在200px
• 如果在没有图像的情况下，行的高度为260px，带有图像，则它的高度保持在260px，但图像不会比100％大，即200px。

我已经尝试对td和img标签使用min-height + height + max-height，但是从浏览器的角度来看，没有任何改变。

笔记：

• 我正在使用XHTML 1.1的doctype
• 我不需要需要JavaScript的答案。我已经知道如何处理JS（即使没有jQuery）。我想要一个CSS唯一的答案。

Answer 1

你可以试试这段代码：

<table width="100%" border="1">
<tr>
    <td height="100">
            <img src="http://dystroy.org/re7210/img/tartare-saumon-creme-salade-harengs-pommes-de-terre-800.jpg" style="width:auto; height:100%;"/>
    </td>
</tr>
</table>​​​​​​​​​​​​​​​​

见DEMO