'css img 100% height doesn't resize to table row height

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>
htmlcssimageheight


Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Bumhan Yu

Related Questions