Непропорциональное масштабирование изображения в пределах одного ряда

Question

У меня есть ряд изображений в контейнере с жидкой шириной, с фиксированной шириной промежутка между изображениями. Если контейнер сжимается, изображения должны плавно изменять размер и по-прежнему соответствовать всей ширине контейнера.

Для этого я использую пробел: nowrap; и дисплей: таблица; на контейнере и дисплее: таблица-ячейка; на своих детей.

Тем не менее, изображения, кажется, масштабируются при разных факторах, в результате чего некоторые изображения являются чрезвычайно маленькими, в то время как другие только немного меньше. Мне нужно, чтобы они пропорционально масштабировались, и я не знаю как! Любая помощь будет принята с благодарностью!

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

Это поле слишком велико на экранах меньшего размера. Таким образом, либо уменьшите это поле справа до меньшего размера в зависимости от размера экрана, либо на экранах меньшего размера установите 100% ширины для каждого изображения.