Как сделать такую разметку?

Question

[Alex_8x]

Есть родительский div в котором выводятся изображения с одиннаковой шириной, но разной высотой.


Разметка следующая:

<div class="parrent">
<img src='">
<img src='">
<img src='">
<img src='">
<img src='">
<img src='">
<img src='">
</div>

Подскажите, как сделать так, чтобы изображения заполняли все свободное пространство родителя?

Comments

[VoidVolker]

Ждал пока прогрузятся дивы...

[Сергей delphinpro]

Если высота родителя фиксированная, то флексы в колонку могут помочь.

ну а вообще, в более общем случае, скриптовое решение. считаем, решаем, заполняем. на css я решения не вижу (кроме вырожденных случаев).

[Александр Васильев]

Сергей delphinpro автор клал на всё, как всегда.

[rootnoroot]

Александр Васильев, :D

Answer 1

[rootnoroot]

разбейте на блоки left right и выводите
или используйте срипты подобные этому

Answer 2

[Александр Васильев]

grid, 2 колонки, чайлды внутри колонок стилями. Список по колонкам делить через js. Количество гридов из списка делить через js, исходя из дизайнерского набора по кол-ву. Изображения внутри через 100/100% и cover.

Comments

[Сергей delphinpro]

Это не надежно, в Сафари могут быть проблемы (это я про height:100%).

[Александр Васильев]

Сергей delphinpro, а, ну да, и проверить на реальном ios, он сейчас вроде ничего так, почти все тащит.

Answer 3

[wervan]

Можно сделать 2 разных дива и флекс колумн поставить ))))))))

Answer 4

[Антон Шаманов]

https://www.cssscript.com/masonry-gallery-layout/ ну или какой-то аналогичный скрипт галереи.