文章/答案/技术大牛

发布

社区首页 >问答首页 >如何强制左<td>内图像的高度自动跟随右<td>的高度？

问如何强制左<td>内图像的高度自动跟随右<td>的高度？
EN

Stack Overflow用户

提问于 2018-06-25 17:50:07

回答 2查看 66关注 0票数 1

例如，在一个表中，我在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.

html

css

html-table

responsive-design

回答 2

Stack Overflow用户

发布于 2018-06-25 22:41:45

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

如下所示：

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

票数 0

Stack Overflow用户

发布于 2018-06-26 00:42:05

我相信使用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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51020601

复制

相似问题

问如何强制左<td>内图像的高度自动跟随右<td>的高度？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何强制左<td>内图像的高度自动跟随右<td>的高度？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何强制左<td>内图像的高度自动跟随右<td>的高度？
EN