Resize image to its parent div on table
<p>I was trying to make image table that fill window.</p>

<p>The following is my full source:</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;ready&lt;/title&gt;
  &lt;style type="text/css"&gt;
    html,
    body {
      min-width: 2048px;
      height: 100%;
    }
    .player_buttons {
      table-layout: fixed;
      height: 100%;
      width: 100%;
    }
    .playerimg img {
      width: 100%;
      height: 100%;
    }
  &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;table class="player_buttons"&gt;
    &lt;tr class="team" id="team_A"&gt;
      &lt;td class="playerimg"&gt;
        &lt;img src="../assets/profiles/1.jpg" /&gt;
      &lt;/td&gt;
      &lt;td class="playerimg"&gt;
        &lt;img src="../assets/profiles/2.png" /&gt;
      &lt;/td&gt;
      &lt;td class="playerimg"&gt;
        &lt;img src="../assets/profiles/3.jpg" /&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="team" id="team_B"&gt;
      &lt;td class="playerimg"&gt;
        &lt;img src="../assets/profiles/4.jpg" /&gt;
      &lt;/td&gt;
      &lt;td class="playerimg"&gt;
        &lt;img src="../assets/profiles/5.jpg" /&gt;
      &lt;/td&gt;
      &lt;td class="playerimg"&gt;
        &lt;img src="../assets/profiles/6.jpg" /&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>It is work when the images are small enough,
But in the case of image has big size, table (=.player_buttons) ignore its height (it over body and HTML's height).</p>

<p>I think image keep its aspect and min-size is problem.
How can I adjust images to their cell size?</p>

<p>Thanks.</p>

<p>ADD.</p>

<pre><code>.playerimg img {height: 500px;}
</code></pre>

<p>-> it works (but I don't want to set height to 500px)</p>

<pre><code>.playerimg img {height: 10%;}
</code></pre>

<p>-> ignore height.</p>