title: How to make images in a table dynamically fit the size of the browser?
body: <p>I have a table which could contain 1 to 12 images depending on user input. If there is one image then it'll show up in the table nicely. However, if there are 12 images, it'll stretch vertically downwards until I need to scroll down to view the rest of the images.</p>
  
  <p>Is there a way to dynamically resize the images such that no scrolling is required and everything fits into the table?</p>
  
  <p>What it looks like with</p>
  
  <p>5 images: </p>
  
  <p><img src="https://i.imgur.com/WZVxdKum.png" alt=""></p>
  
  <p>12 images: </p>
  
  <p><img src="https://i.imgur.com/KAPurzom.png" alt=""></p>
  
  <p>This is the current table I have and I use a JavaScript to fill in the images:</p>
  
  <pre><code>&lt;table id="first"&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;img id="firstL1"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;img id="firstL2"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;img id="firstL3"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;img id="firstL4"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;img id="firstL5"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;img id="firstL6"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;img id="firstL7"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;img id="firstL8"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;img id="firstL9"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;img id="firstL10"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;img id="firstL11"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;img id="firstL12"&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/td&gt;
                  &lt;td&gt;&lt;ul&gt;&lt;/ul&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;img id="firstR1"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;img id="firstR2"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;img id="firstR3"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;img id="firstR4"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;img id="firstR5"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;img id="firstR6"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;img id="firstR7"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;img id="firstR8"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;img id="firstR9"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;img id="firstR10"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;img id="firstR11"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;img id="firstR12"&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
  </code></pre>