对齐具有不同尺寸的图像连续

Question

我有一个固定的宽度和不同的宽度和高度3个图像的容器。我们的目标我努力做到：

1. 图像显示在一排
2. 图像的行被填充在摘要宽度包装容器
3. 行的高度自动计算
4. 高度和每个图像的宽度被缩放保持其比
5. 连续图像在固定之间的利润率，而不是在左也不是，右两侧。

期望结果的说明图：

如何执行呢？

Answer 1

您可以定义一个共同的固定的高度和经销商的宽度图像和容器上使用柔性与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;
  }

并不要紧，你有什么图片的宽度和高度