Css 单行div中不相称的流体图像缩放

我有一排图像放在流体宽度容器中，图像之间有固定宽度的空间。如果容器收缩，图像需要流畅地调整大小，并且仍然适合容器的整个宽度

为此，我使用空白：nowrap；和显示：表格；在容器上显示：表格单元格；在它的孩子身上

然而，这些图像似乎在不同的因子下进行缩放，导致一些图像非常小，而另一些图像仅稍小。我需要它们按比例缩放，但我不知道如何缩放！任何帮助都将不胜感激

HTML:

有关实时演示，请参阅此笔：

---

正如我所看到的，这里的问题在于：

.fluid-width-fixed-space > div .inner
{
        margin-right: 50px;
}

---

在较小的屏幕尺寸上，这个利润太大了。因此，要么根据屏幕大小将边距减小到较小的大小，要么在较小的屏幕上为每个图像设置100%的宽度。

太棒了，你是最好的！这正是问题所在。

.fluid-width-fixed-space
{
        white-space: nowrap;
        display: table;
}
.fluid-width-fixed-space > div
{
        display: table-cell;
}
.fluid-width-fixed-space img
{
        display: inline-block;
        max-width: 100%;
        height: auto;
        border: 1px solid #000;
        vertical-align: baseline;
}
.fluid-width-fixed-space > div .inner
{
        margin-right: 50px;
}

.fluid-width-fixed-space > div .inner
{
        margin-right: 50px;
}