заполнение родительского контейнера изменяющимся количеством дочерних элементов видео, каждый с соотношением сторон

Question

У меня есть изменяемый размер родительского элемента, который содержит постоянно меняющееся количество видеоэлементов. Каждое видео должно поддерживать соотношение сторон по ширине / высоте 4/3. Поскольку общий размер родительского элемента растягивается и изменяется, каждый элемент видео должен изменять свой размер, чтобы максимизировать общую площадь видеопространства или минимизировать неиспользуемую (не видео) область в родительском элементе.

Я чувствую, что это должно быть относительно легко, но здесь я нахожусь несколько часов спустя ... что я забыл с детства геометрию?

Нет ограничений на css элементов, которые я могу использовать - я пробовал с сетками и макеты flexbox, все безрезультатно.

Answer 1

Ваша задача - поместить n прямоугольники с фиксированным отношением C=W/H = 4/3 в прямоугольный контейнер angular с заданными Width и Height

Пусть масштабированная высота прямоугольника равна h (неизвестно пока), ширина равна w = C * h

Каждая строка сетки содержит nr маленькие прямоугольники

nr =  Floor(Width / (C * h))   // rounding down

Каждый столбец содержит nc строк

nc = Floor(Height / h)

Запись неравенство

n <= nc * nr
n <=  Floor(Width / (C * h)) * Floor(Height / h)

и решить его для неизвестного h (найти максимально возможное h значение)

Для реальных значений параметров h может быть найдено получение начального приблизительного значения:

h0 = Ceil(Sqrt(Width * Height / (n * C)))   //rounding up

и уменьшающееся значение h, пока неравенство не станет истинным