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

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

• 如果没有图片，行的高度 < 100px，有图片，行的高度就变成 100px

• 如果没有图片，该行的高度为 140 像素，如果有图片，它保持 140 像素的高度

• 如果没有图片，该行的高度为 200 像素，如果有图片，它保持 200 像素的高度

• 如果没有图像，该行的高度为 260 像素，有图像时，它保持 260 像素的高度，但图像不会比 100%(即 200 像素)大。

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

注意事项:

• 我正在使用 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