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

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 为单位）。如果行比图像的大小更薄（它没有图像），我想将图像缩小到 100 像素。
例如：

• 如果没有图片，行

• 如果没有图片，该行是 140px 的高度，有图片，它保持 140px 的高度

• 如果没有图片，该行是200px的高度，有图片，它保持200px的高度

• 如果没有图片，该行是 260px 的高度，有图片，它保持 260px 的高度，但图片不会超过 100%，即 200px。

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

注意事项：

• 我正在使用 XHTML 1.1 的文档类型

• 我不需要需要 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