title: Stretching an image to fill the height of its table cell
body: <p>I have a table cell of unknown height which contains an <code>img</code>. This <code>img</code> has a fixed pixel width, but I need it to stretch to fill (but not exceed) the entire height of the table cell. The width should remain the same no  matter what the height.</p>
  
  <p>Usually, I'd do this using <code>height: 100%</code>, but this doesn't appear to be working in this scenario:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>img {
    display: block;
    width: 25px;
    height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;
        Here is some content.&lt;br/&gt;
        I would like the adjacent image to stretch to be&lt;br/&gt;
        the same height as it, but not have the image get&lt;br/&gt;
        any wider.
      &lt;/td&gt;
      &lt;td&gt;
        &lt;img src="https://placehold.it/20x20" /&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I make the image fill the height of its cell?</p>