CSS: сделать заливку изображения родительской, но не менять родительский размер ⇐ CSS

[Anonymous]

У меня есть галерея изображений, и все изображения квадратные. Изображения находятся в своих div и большом div с дисплеем, который можно сгибать, чтобы создать родительский элемент для всех div. Я хочу, чтобы изображения заполняли родительский элемент div, но не увеличивали их.
ОБНОВЛЕНИЕ: я видел на этом веб-сайте, что свойство flex-grow НЕ увеличивает (полезную) ширину элемент. Посетите веб-сайт для дальнейшего объяснения, но это означает, что мне придется использовать что-то еще, кроме flex-grow, чтобы сделать мои родительские элементы управления шириной верхнего элемента управления.

Кроме того, мне не нужна фиксированная количество предметов в строке!! Я хочу, чтобы когда вы увеличивали окно, элементы становились все шире и шире до точки, где вы затем сжимаете элементы и добавляете один снизу к строке выше.
Вот что у меня есть:


Вот чего я хочу:


Вот мой код:
< div class="snippet">

Код: Выделить всё

.ImagesContainer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: .25rem;
margin-top: 1rem;
width: 100%;
}

.ImagesContainer img {
width: 20vw;
min-width: 200px;
margin: 5px;
transition-duration: 200ms;
}

.ImagesContainer div {
background-color: red;
flex-grow: 1;
}

Код: Выделить всё

 
[img]https://picsum.photos/200[/img]
[img]https://picsum.photos/200[/img]
[img]https://picsum.photos/200[/img]
[img]https://picsum.photos/200[/img]
[img]https://picsum.photos/200[/img]
[img]https://picsum.photos/200[/img]
[img]https://picsum.photos/200[/img]
[img]https://picsum.photos/200[/img]
[img]https://picsum.photos/200[/img]
[img]https://picsum.photos/200[/img]

У кого-нибудь есть идеи?

Подробнее здесь: https://stackoverflow.com/questions/721 ... arent-size