title: How do I make my image fit the entire container?
body: <p>I am building a simple gallery using Javascript and CSS but can't seem to get the image to fit full frame. Here is what it looks like right now:</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>body {
    margin: 5em;
  }
  h1 {
    text-align: center;
    font-size: 5em;
  }
  .gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .gallery &gt; .image-container {
    flex: 1 1 22%;
    margin: 1em;
  
    box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="container"&gt;
        &lt;h1&gt;Gallery&lt;/h1&gt;
        &lt;div class="gallery"&gt;
          &lt;div class="image-container"&gt;
            &lt;input type="checkbox" id="zoomCheck" /&gt;
            &lt;label for="zoomCheck"&gt;
              &lt;img
                src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-      0.3.5&amp;amp;q=80&amp;amp;fm=jpg&amp;amp;crop=entropy&amp;amp;cs=tinysrgb&amp;amp;w=400&amp;amp;fit=max&amp;amp;ixid=eyJhcHBfaWQiOjQ0NDc3fQ&amp;amp;s=493802e93ec426171750ac2291e2867e"
                id="F8QDoWjZnsA"
              /&gt;
            &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="image-container"&gt;
            &lt;input type="checkbox" id="zoomCheck" /&gt;
            &lt;label for="zoomCheck"&gt;
              &lt;img
                src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-0.3.5&amp;amp;q=80&amp;amp;fm=jpg&amp;amp;crop=entropy&amp;amp;cs=tinysrgb&amp;amp;w=400&amp;amp;fit=max&amp;amp;ixid=eyJhcHBfaWQiOjQ0NDc3fQ&amp;amp;s=493802e93ec426171750ac2291e2867e"
                id="F8QDoWjZnsA"
              /&gt;
            &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="image-container"&gt;
            &lt;input type="checkbox" id="zoomCheck" /&gt;
            &lt;label for="zoomCheck"&gt;
              &lt;img
                src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-0.3.5&amp;amp;q=80&amp;amp;fm=jpg&amp;amp;crop=entropy&amp;amp;cs=tinysrgb&amp;amp;w=400&amp;amp;fit=max&amp;amp;ixid=eyJhcHBfaWQiOjQ0NDc3fQ&amp;amp;s=493802e93ec426171750ac2291e2867e"
                id="F8QDoWjZnsA"
              /&gt;
            &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="image-container"&gt;
            &lt;input type="checkbox" id="zoomCheck" /&gt;
            &lt;label for="zoomCheck"&gt;
              &lt;img
                src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-0.3.5&amp;amp;q=80&amp;amp;fm=jpg&amp;amp;crop=entropy&amp;amp;cs=tinysrgb&amp;amp;w=400&amp;amp;fit=max&amp;amp;ixid=eyJhcHBfaWQiOjQ0NDc3fQ&amp;amp;s=493802e93ec426171750ac2291e2867e"
                id="F8QDoWjZnsA"
              /&gt;
            &lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/tjfto.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tjfto.jpg" alt="enter image description here" /></a></p>
  <p>As you can see, there is a white gap on the bottom of some images. I wasn't having this issue until I wrapped all the images in the <code>&lt;div class='image-container'&gt;</code> elements (something I need to eventually allow me to zoom in on the images). How can I make it so my image fills the entire <code>image-container</code> div? Ideally, all pics would look like the first one.</p>