Question

例如，在一个表格内，我在td内有一个图像，在td右侧有一些文本：

<table>
  <tr>
  <td><img src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d?s=96&d=identicon&r=PG&f=1"/></td>
  <td>test1<br/>test2<br/>test3</td>
  </tr>
</table>

现在，我希望图像的高度自动遵循其右侧td的高度：

当右td短于图像时，图像将按比例缩小：

当右侧td较高时，图像将放大：

有没有办法做到这一点？我尝试过：

<table style="position:relative;height:auto;">
  <tr style="position:relative;height:auto;">
  <td style="position:relative;height:auto;"><img src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d?s=96&d=identicon&r=PG&f=1" style="position:relative;height:auto;"/></td>
  <td style="position:relative;">test1<br/>test2<br/>test3</td>
  </tr>
</table>

but I can't get my desired result.

Answer 1

您可以尝试将max-height CSS规则设置为100％

赞：

<img src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d?s=96&d=identicon&r=PG&f=1" style="max-height:100%;"/>

Answer 2

我相信使用jQuery会比使用普通CSS容易。如果有帮助，您可以尝试以下解决方案：

<!DOCTYPE html>
<html>
<head>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

</head>
<body>
    <table>
        <tr>
            <td id="first"><img
                src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d?s=96&d=identicon&r=PG&f=1" /></td>

            <td id="second">test1<br />test2<br />test3<br /> test1<br />test2<br />test3<br />
                test1<br />test2<br />test3
            </td>
        </tr>
    </table>

    <script type="text/javascript">
        var h1 = $("#second").css("height");
        console.log(h1);
        $("img").css("height", h1);
    </script>
</body>
</html>

如何自动强制左内部的图像高度跟随右高度？

2 个答案: