使图像拉伸到容器的边缘

Question

我有一个宽度为 75vw 的容器，该容器内有一个图片库。我想做的是让图像始终是合适的大小，无论屏幕尺寸如何，都可以伸展到容器的末端。有没有办法做到这一点。CSS 中的计算会起作用吗？如果是这样，我该如何使用它？谢谢。

网站在这里

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属性来设置 flex 基础。我将每个<figure>设置为 47.5%，以便它们之间始终有 5%，并且还设置了 5% 的上边距来模拟每个框周围空间相等的网格。我还设置每个图像以填充其父级宽度的 100%。

figure {
flex: 0 0 47.5%;
margin: 5% 0 0;
}
figure img {
width: 100%;
vertical-align:top;
}

我还建议使用媒体查询，以便两列在较小的设备上堆叠。
下面，我使用了一种"移动优先"模式。

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%

---

在您的情况下，弹性速记可能是不必要的，常规的旧width可能也可以正常工作。有关详细信息，请参阅弹性基础和宽度之间有什么区别？

同样有用的：了解弹性框：您需要了解的所有内容 - 尤其是有关弹性项属性的部分。