2

我有以下代码：

<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 也可以。

4

3 回答 3

2

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/

于 2012-05-02T14:38:41.133 回答
0

你可以使用这个：

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

只是为了自动适应/缩放您的图像

于 2012-05-02T14:39:58.590 回答
0

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

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

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

这适用于 div，但我不确定表格单元格，无论如何我发现了一些其他形式的讨论，看看你是否可以从他们那里得到任何帮助

使用 Javascript 获取表格单元格高度
如何获取 div 的像素高度？

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

于 2012-05-02T15:40:11.430 回答