Выравнивание изображений с разными размерами подряд

Question

У меня есть контейнер с фиксированной шириной и 3 изображения с различной шириной и высотой.Цель, которую я изо всех сил стараюсь достичь:

1. Изображения отображаются в ряд
2. Ряд изображений заполняет упаковочный контейнер суммарной шириной
3. Высота строки равнарассчитывается автоматически
4. Высота и ширина каждого изображения масштабируется с сохранением соотношения
5. Изображения в ряду имеют фиксированное поле между ними, но не слева и справа.

Иллюстрация желаемого результата:

Как это сделать?

Answer 1

Вы можете определить общую фиксированную высоту и автоматическую ширину для изображений и использовать flex с justify-content: space-between для контейнера

html, body {
  margin: 0;
}

.container {
  display: flex;
  justify-content: space-between;
}

.container>img {
  height: 120px;
  width: auto;
}

<div class="container">
  <img src="https://placehold.it/300x200/fa0">
  <img src="https://placehold.it/160x300/0fa">
  <img src="https://placehold.it/500x180/f0a">
</div>

Answer 2

добавьте этот стиль для вашего контейнера:

.container {
  display: flex;
  justify-content: space-between;
  }

, и это не имеет значения, какова ширина и высота ваших изображений