css img 100% 高度不会调整为表格行高

发布于 2025-01-10 15:25:59 字数 759 浏览 1 评论 0原文

以下代码不会将图像缩小到行高,我不明白为什么。 论坛上有很多类似的问题,但我似乎找不到这种行为的解释或解决方案。 我可以通过固定图像的高度来轻松解决这个问题,但这并没有让我学到任何东西:)

<html>
<head>
    <style>
      tr { height: 3em; }
      td { height: 100%; border: 1px solid green; }
      img { height: 100%; }
    </style>
</head>
<body>
  <table>
    <tr>
      <td>some text</td>
      <td><img src='https://www.google.be/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png' /></td>
    </tr>
    <tr>
      <td>other text</td>
      <td><img src='https://s.yimg.com/rz/p/yahoo_frontpage_en-US_s_f_p_bestfit_frontpage_2x.png' /></td>
    </tr>
  </table>
</body>

Following code doesn't shrink the image to the row height and I don't understand why.
there are a lot of similar questions on the forum, but I can't seem to find the explanation or solution for this behaviour.
I can solve it easily enough by fixing the height of the image, but that doesn't learn me anything :)

<html>
<head>
    <style>
      tr { height: 3em; }
      td { height: 100%; border: 1px solid green; }
      img { height: 100%; }
    </style>
</head>
<body>
  <table>
    <tr>
      <td>some text</td>
      <td><img src='https://www.google.be/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png' /></td>
    </tr>
    <tr>
      <td>other text</td>
      <td><img src='https://s.yimg.com/rz/p/yahoo_frontpage_en-US_s_f_p_bestfit_frontpage_2x.png' /></td>
    </tr>
  </table>
</body>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

瑕疵 2025-01-17 15:25:59

表格单元格将调整其高度以适应其内容,这是预期的行为:内容越多,它就越高。

您可能希望为 img 提供 max-height,而不是强制 td 的高度。请参阅下面的片段。

tr {
  height: 3em;
}

td {
  height: 100%;
  border: 1px solid green;
}

img {
  max-height: 3em;
}
<table>
  <tr height="3em">
    <td>some text</td>
    <td>
      <img src='https://www.google.be/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png' />
    </td>
  </tr>
  <tr>
    <td>other text</td>
    <td>
      <img src='https://s.yimg.com/rz/p/yahoo_frontpage_en-US_s_f_p_bestfit_frontpage_2x.png' />
    </td>
  </tr>
</table>

A table cell will adjust its height to fit its content, which is the expected behavior: the more content you have, the taller it gets.

Rather than forcing td's height, you might want to give max-height to your img. See the snippet below.

tr {
  height: 3em;
}

td {
  height: 100%;
  border: 1px solid green;
}

img {
  max-height: 3em;
}
<table>
  <tr height="3em">
    <td>some text</td>
    <td>
      <img src='https://www.google.be/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png' />
    </td>
  </tr>
  <tr>
    <td>other text</td>
    <td>
      <img src='https://s.yimg.com/rz/p/yahoo_frontpage_en-US_s_f_p_bestfit_frontpage_2x.png' />
    </td>
  </tr>
</table>

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文