Question

我有一个宽度为75vw的容器和一个容器内的图像库。我要做的是让图像始终是正确的尺寸，无论屏幕尺寸如何，都可以伸展到容器的两端。有没有办法做到这一点。 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件） - （（所需间隙百分比*每排间隙）/每行项目）

例如，每行三个项目：

（100/3） - （5 * 2/3）= 30％

每行四件物品：

（100/4） - （5 * 3/4）= 21.25％

在你的情况下，flex速记可能是不必要的，而常规的旧width可能也会起作用。有关详细信息，请参阅What are the differences between flex-basis and width?

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

Answer 2

您可以尝试使用此类https://codepen.io/anon/pen/MrpPGy

figure {
  display: inline-block;
  width: 50vw;
  padding: .5rem;
}

figure img {
  width: 100%
}

.gallery {
  display: flex;
  flex-flow: wrap;
  justify-content: flex-start;
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
}

使图像伸展到容器的边缘

2 个答案: