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，如果它的行比图像的大小更薄（它没有图像）。
例如：

如果没有图像，该行是＆lt; 100px高度，带图像，高度为100px
如果没有图像，行的高度为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

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

1 个答案: