使我的flexbox内的所有图像大小相等，但总是适合可用的宽度

Question

我有一个问题与我的flexbox容器。我需要以下内容为真:

1. 内部图像的宽度应该始终在90到200px之间。
2. 图片应该在所有点上大小相等。
3. 图片应该占用宽度上的可用空间。

这段代码几乎显示了我想要的。如果你从250px左右的窗口宽度开始，然后增加它，一切都像我想要的那样工作，直到425px左右，最后一张图片不适合。然后它会比其他的大很多。我知道为什么，我只是想不出如何强迫它与其他3张图片的大小相同。我尝试了所有的东西，从灵活的基础和灵活的一般，但我所有的尝试总是失败的一些我的要求。

.pp-avatar-area {
width: 75%;
max-width: 600px;
border: 1px solid #000;
border-radius: 0.25rem;
margin: 0.5rem 0;
}
.pp-avatar-area {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.5rem;
overflow-y: auto;
}
.pp-image-avatar-item {
min-width: 90px;
max-width: 200px;
aspect-ratio: 1 / 1;
flex-grow: 1;
border: 1px solid red;
border-radius: 0.25rem;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}

<div class="pp-avatar-area">
<div class="pp-image-avatar-item" style="background-image: url('https://gravatar.com/avatar/2a58d3da93af4340c17566c1d486ca68?s=400&d=robohash&r=x')"></div>
<div class="pp-image-avatar-item" style="background-image: url('https://gravatar.com/avatar/2a58d3da93af4340c17566c1d486ca68?s=400&d=robohash&r=x')"></div>
<div class="pp-image-avatar-item" style="background-image: url('https://gravatar.com/avatar/2a58d3da93af4340c17566c1d486ca68?s=400&d=robohash&r=x')"></div>
<div class="pp-image-avatar-item" style="background-image: url('https://gravatar.com/avatar/2a58d3da93af4340c17566c1d486ca68?s=400&d=robohash&r=x')"></div>
</div>

Answer 1

display: grid:

.pp-avatar-area {
display: grid;

/* As many columns as possible, fill all remaining width. */
/* Column width lies between 90px and 200px. */
grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
/* Same height for all rows. */
grid-auto-rows: 1fr;

gap: 0.5rem;

max-width: 600px;
width: 75%;
}

试一试:

.pp-avatar-area {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
grid-auto-rows: 1fr;
gap: 0.5rem;

margin: 0.5rem 0;

border: 1px solid #000;
border-radius: 0.25rem;

padding: 0.5rem;

overflow-y: auto;

max-width: 600px;
width: 75%;
}
.pp-image-avatar-item {
aspect-ratio: 1 / 1;

border: 1px solid red;
border-radius: 0.25rem;

background-position: center;
background-repeat: no-repeat;
background-size: cover;

cursor: pointer;
}

<div class="pp-avatar-area">
<div class="pp-image-avatar-item" style="background-image: url('https://gravatar.com/avatar/2a58d3da93af4340c17566c1d486ca68?s=400&d=robohash&r=x')"></div>
<div class="pp-image-avatar-item" style="background-image: url('https://gravatar.com/avatar/2a58d3da93af4340c17566c1d486ca68?s=400&d=robohash&r=x')"></div>
<div class="pp-image-avatar-item" style="background-image: url('https://gravatar.com/avatar/2a58d3da93af4340c17566c1d486ca68?s=400&d=robohash&r=x')"></div>
<div class="pp-image-avatar-item" style="background-image: url('https://gravatar.com/avatar/2a58d3da93af4340c17566c1d486ca68?s=400&d=robohash&r=x')"></div>
</div>