Question

我有以下代码：

<table>
    <tr>
        <td class="first">
            <img src="ReallyLargeImage.png" />
        </td>
        <td class="second">
            One line of text<br />
            Another line of text<br />
        </td>
    </tr>
    <tr>
        <td class="first">
            <img src="AnotherReallyLargeImage.png" />
        </td>
        <td class="second">
            This<br />
            has<br />
            four<br />
            lines<br />
        </td>
    </tr>
    ...
</table>

我希望td.second的高度确定每行的高度，td.first中的图像缩小（保持其大小比例）以适合该高度。

如果我只使用CSS /属性来保持整洁，那将是很好的，javascript也会起作用。

Answer 1

<强> CSS

.first img { display: none; }

<强> JS

$("table tr").each(function(){
    $(this).find(".first img").css("max-height", 
        $(this).find(".second").height()).show();
});

首先，您可以使用css隐藏图像，以使height()计算不会因图像大小而偏斜。如果它没有被隐藏，高度计算似乎因某种原因而消失。也许是一个jQuery错误？然后，一旦设置了max-height，就可以显示图像。

示例：http://jsfiddle.net/hunter/c3jP6/

Answer 2

您可以使用：

<img style="width:100%;height:100%;"/>

只是为了自动调整/缩放你的图像

Answer 3

您想动态更改图片的大小吗？所以你必须获得td.second的高度，你不能用CSS做到这一点，你肯定需要javascript。

你可以像这样获得元素的高度

var divh=document.getElementById('id').offsetHeight;

这项工作很好用一个div，但我不确定有一个表格单元格，无论如何我发现其他形式的讨论，看看你是否可以从他们那里得到任何帮助

Get Table Cell Height’s with Javascript
How to get pixel height of a div?

获得元素的高度后，您可以使用javascript设置图像的高度。

表格行高由特定单元格确定

3 个答案: