Как заставить изображения вместе заполнять ширину контейнера, сохраняя при этом одинаковую высоту и соотношение сторон с ⇐ Html

[Anonymous]

Я пытаюсь создать макет, в котором набор изображений:

• Отображаются в одну строку.
• Сохраняют индивидуальные соотношения сторон (без искажений).
• Имеют одинаковую высоту для всех изображений.
• Совместно заполняют всю ширину родительского контейнера, не оставляя пробелов или переполнения.
• Высота изображения (и контейнер) должны динамически корректироваться, чтобы все изображения могли располагаться по горизонтали.

Я понимаю, что flex-grow или width: auto можно использовать для управления шириной, но изображения в конечном итоге получаются с разной высотой (из-за их аспекта). соотношения) или не заполнять ширину родительского элемента вместе.
Например:

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

[img]https://placehold.co/300x400[/img]
[img]https://placehold.co/400x300[/img]
[img]https://placehold.co/500x300[/img]

• Контейнер должен занимать 100 % доступного горизонтального пространства.
• Элементы img должны иметь одинаковую высоту, а их ширина должна корректироваться пропорционально для сохранения пропорций.
• Высота изображений должна определяться динамически, чтобы все изображения помещались внутри контейнера горизонтально.

Как добиться такого макета? Мне нужно чистое решение CSS.
Что я пробовал:

• Использую свойства flex-grow и flex-shrink, но это приводит к тому, что изображения имеют разную высоту.
• Установка фиксированной высоты для контейнера, но это не адаптируется динамически.

Будем очень признательны за любые рекомендации или примеры!

Подробнее здесь: https://stackoverflow.com/questions/793 ... ning-equal