Make images stretch to container's edge

Question

I have a container that has a width of 75vw and an image gallery inside that container. What I am looking to do is have the images always be the right size to stretch out to the ends of the container no matter the screen size. Is there a way to do this. Would Calc in CSS work? If so how could I use it? Thanks.

Website here

figure {
  display: inline-block;
  margin-top: 1rem;
  margin-right: 1rem;
}

.gallery {
  display: flex;
  flex-flow: wrap;
  justify-content: flex-start;
}

<!--Content Start-->
<div class="content">
  <!--Navigation & Header & Messy-->
  <div class="top">
    <div class="left">
      <h1>Jude Wallach</h1>
    </div>
    <div class="right">
      <ul>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </div>
  </div>
  <!--Gallery Start-->
  <div class="gallery">
    <figure>
      <a href="https://placeholder.com"><img src="http://via.placeholder.com/464x464" class="galleryitem"></a>
    </figure>
    <figure>
      <a href="https://placeholder.com"><img src="http://via.placeholder.com/464x464" class="galleryitem"></a>
    </figure>
    <figure>
      <a href="https://placeholder.com"><img src="http://via.placeholder.com/464x464" class="galleryitem"></a>
    </figure>
    <figure>
      <a href="https://placeholder.com"><img src="http://via.placeholder.com/464x464" class="galleryitem"></a>
    </figure>
  </div>
</div>

Answer 1

I suggest using the flex property to set the flex basis. I've set each <figure> to 47.5% so that there's always 5% between them, and also set a 5% top margin to simulate a grid with equal space around each box. I also set each image to fill 100% of its parent's width.

figure {
  flex: 0 0 47.5%;
  margin: 5% 0 0;
}

figure img {
  width: 100%;
  vertical-align:top;
}

I'd also recommend using media queries so that the two columns stack on smaller devices.
Below, I've used a sort of "mobile first" pattern.

html,
body {
  margin: 0;
}

a {
  text-decoration: none;
  color: #909090;
}

h1 {
  font-family: 'Open Sans', sans-serif;
  font-size: 2.5rem;
  text-transform: uppercase;
  font-weight: 800;
  margin: 0;
}

.content {
  max-width: 75vw;
  margin: 0 auto;
  background-color: rgba(200, 200, 255, .5); /* just for demo purposes */
}

.top {
  text-align: center;
}

#head_links {
  list-style: none;
  margin: 0;
  padding: 0;
}
#head_links li a {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 1.25rem;
  text-transform: uppercase;
}

.gallery figure {
  margin: 5% 0 0;
}
.gallery figure img {
  display: block;
  width: 100%;
}

@media (min-width: 600px) {
  .top {
    display: flex;
    justify-content: space-between;
    text-align:left;
  }
  .left, .right {
    flex: 0 0 50%;
  }
  #head_links {
    display: flex;
    justify-content: flex-end;
  }
  #head_links li:not(:first-child) {
    margin: 0 0 0 1em;
  }
  .gallery {
    display: flex;
    justify-content: space-between;
    flex-flow:wrap;
  }
  .gallery figure {
    flex: 0 0 47.5%;
  }
}


@media (min-width: 900px) {
  .gallery figure {
    flex: 0 0 30%;
  }
}

@media (min-width: 1200px) {
  .gallery figure {
    flex: 0 0 21.25%;
  }
}

<div class="content">
  <div class="top">
    <div class="left">
      <h1>Jude Wallach</h1>
    </div>
    <div class="right">
      <ul id="head_links">
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </div>
  </div>
  <div class="gallery">
    <figure>
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/464x464">
      </a>
    </figure>
    <figure>
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/464x464">
      </a>
    </figure>
    <figure>
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/464x464">
      </a>
    </figure>
    <figure>
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/464x464">
      </a>
    </figure>
        <figure>
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/464x464">
      </a>
    </figure>
    <figure>
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/464x464">
      </a>
    </figure>
        <figure>
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/464x464">
      </a>
    </figure>
    <figure>
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/464x464">
      </a>
    </figure>
    <figure>
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/464x464">
      </a>
    </figure>
  </div>
</div>

---

To calculate the basis percentage, I use this formula:

(100 / items per row) - ( (gap percentage desired * gaps per row) / items per row)

For example, for three items per row:

(100 / 3) - ( 5 * 2 / 3 ) = 30%

For four items per row:

(100 / 4) - ( 5 * 3 / 4 ) = 21.25%

---

In your case, flex shorthand might be unnecessary and regular old width would probably work just as well. For more information see What are the differences between flex-basis and width?

Also useful: Understanding Flexbox: Everything you need to know - particularly the part about flex item properties.