0

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

<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 像素。
例如：

  • 如果没有图像，该行的高度 < 100px，有图像，它变成 100px 高度

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

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

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

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

笔记：

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

  • 我不需要需要 JavaScript 的答案。我已经知道如何使用 JS（即使没有 jQuery）。我想要一个仅 CSS 的答案。

4

1 回答 1

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>​​​​​​​​​​​​​​​​

查看演示

于 2012-09-23T11:34:04.010 回答