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

【问题标题】：Aligning images with different dimensions in a row连续对齐具有不同尺寸的图像
【发布时间】：2019-02-06 04:56:36
【问题描述】：

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

图片连续显示
图片行以摘要宽度填充包装容器
自动计算行高
每个图像的高度和宽度都按比例缩放并保持其比例
连续图像之间有固定的边距，但不是在左侧或右侧。

期望结果的图示：

如何执行此操作？

【问题讨论】：

你尝试了什么？
您可以使用百分比值设置图像宽度，去除固定边距，如width: calc(25% - 20px);
Jeroen Heier，我试过 display: flex;弹性方向：行；宽度：100%；仅当图像高度相同时才有效。
marcelo2605，这并不能帮助实现我展示的图像上显示的结果。

标签： html css flexbox

【解决方案1】：

您可以为图像定义一个通用的固定高度和自动宽度，并在容器上使用带有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>

【讨论】：

好的，它确实有效：jsfiddle.net/c7gj31d6 看来我当时以错误的方式提出了我的问题，因为真正的问题是将它与用于 Wordpress 的 Divi 主题一起使用。那里的图像被包装在几个容器中，每个容器都有自己的样式，我不能在那里工作。
好吧，Divi 和 WP 本身可能应用了许多其他样式，这些样式可能具有非常具体的 CSS 选择器。您可以尝试将!important 添加到上述所有设置中，但可能还有一些其他参数，您还必须通过添加包括!important 在内的默认设置来“中和”这些参数。但总的来说，最好看看你不想要的主题样式做什么，然后将其更改为所描述的方向。

【解决方案2】：

为您的容器添加此样式：

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

你的图片的宽度和高度是多少并不重要

【讨论】：

您好，感谢您的回答。我已经尝试过这种方法，只有当所有图像的高度相同时，它才能按预期工作。