html - 使图像拉伸(stretch)到容器的边缘

Question

我有一个宽度为 75vw 的容器，容器内有一个图片库。我想要做的是无论屏幕尺寸如何，图像始终具有合适的尺寸以拉伸(stretch)到容器的末端。有没有办法做到这一点。 CSS 中的 Calc 会起作用吗？如果是这样，我该如何使用它？谢谢。

网站 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

我建议使用 flex property设置 flex basis .我已经设置了每个 <figure>到 47.5%，这样它们之间总是有 5%，并且还设置 5% 的上边距来模拟每个框周围有相等空间的网格。我还将每个图像设置为填充其父级宽度的 100%。

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

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

我还建议使用 media queries以便两列堆叠在较小的设备上。
下面，我使用了一种“移动优先”模式。

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>

---

要计算基础百分比，我使用以下公式:

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

例如，每行三个元素:

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

每行四个元素:

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

---

在你的情况下，flex shorthand 可能是不必要的和常规的旧 width可能也一样有效。有关详细信息，请参阅 What are the differences between flex-basis and width?

也很有用:Understanding Flexbox: Everything you need to know - 特别是关于 flex item properties 的部分.