连续对齐不同尺寸的图像

Question

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

1. 图像连续显示
2. 图像行以汇总宽度填充包装容器
3. 行高是自动计算的
4. 按比例缩放每个图像的高度和宽度
5. 连续的图像之间具有固定的边距，但不在左侧或右侧。

所需结果的图示：  

如何执行此操作？

Answer 1

为您的容器添加此样式：

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

这与图像的宽度和高度无关

Answer 2

您可以为图像定义通用的固定高度和自动宽度，并在容器上将justify-content: space-between与flex一起使用

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>