Как заставить изображения вместе заполнять ширину контейнера, сохраняя при этом одинаковую высоту и соотношение сторон с ⇐ 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