单行内不成比例的流体图像缩放 div

Question

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

为此，我正在使用 white-space：nowrap；并显示：table；在容器上显示：table-cell；在其 children.

但是，图像似乎在不同因素下缩放，导致一些图像非常小，而其他图像只是稍微小一些。我需要它们按比例缩放，但我不知道怎么做！任何帮助将不胜感激！

HTML:

<div class="container">
    <div class="row">
        <div class="fluid-width-fixed-space col-xs-12 col-sm-8 col-md-10 col-lg-12">
      <div>
        <div class="inner"><img src="http://vriesia.greyhat.nl/prospect/image/demobeeldgroep-andrelon/andrelon-1.jpg" alt=""></div></div><div><div class="inner"><img src="http://vriesia.greyhat.nl/prospect/image/demobeeldgroep-andrelon/andrelon-2.jpg" alt=""></div></div><div><div class="inner"><img src="http://vriesia.greyhat.nl/prospect/image/demobeeldgroep-andrelon/andrelon-3.jpg" alt=""></div></div><div><div class="inner"><img src="http://vriesia.greyhat.nl/prospect/image/demobeeldgroep-andrelon/andrelon-4.jpg" alt=""></div></div><div><div class="inner"><img src="http://vriesia.greyhat.nl/prospect/image/demobeeldgroep-andrelon/andrelon-5.jpg" alt=""></div></div><div><div class="inner"><img src="http://vriesia.greyhat.nl/prospect/image/demobeeldgroep-andrelon/andrelon-6.jpg" alt=""></div>        </div>
     </div>
    </div>
</div>

CSS:

.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;
}

现场演示请看这支笔： http://codepen.io/anon/pen/PZPjop

Answer 1

据我所知，这里的问题在于：

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

在较小的屏幕尺寸上，该边距太大。因此，要么根据屏幕尺寸将 margin-right 减小到更小的尺寸，要么在较小的屏幕上为每个图像设置 100% 的宽度。

单行内不成比例的流体图像缩放 div

Disproportionate fluid image scaling within single row div

css

fluid-images

responsive-images