Масштабирование изображений во flexbox

Question

У меня есть несколько изображений с разными размерами в ряду.Размеры изображений должны автоматически изменяться, чтобы заполнить доступное пространство при сохранении их пропорций.

Если возможно, их фактический визуальный размер должен соответствовать их исходному размеру.Под этим я подразумеваю: в уменьшенной версии большое изображение должно быть больше, чем уменьшенное.

.Container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto;
}

img {
    max-width: 100%;
}

<div class="Container">
  <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
</div>

Здесь можно найти скрипку: http://jsfiddle.net/ej5au8os/

В Firefox 62 я получаю нужный результат.

Похоже, что Chrome и Edge просто не масштабируют изображения вообще.

Чего мне не хватает?

Answer 1

Изображения в виде гибких элементов, как известно, причудливы.Не заставляйте их сгибать предметы.Оберните их в div.

Вот все, что вам нужно (ваш CSS был в порядке, только что избавился от нескольких ненужных правил):

.Container {
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  max-width: 100%;
}

<div class="Container">
  <div>
    <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  </div>
  <div>
    <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  </div>
  <div>
    <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  </div>
  <div>
    <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  </div>
  <div>
    <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  </div>
  <div>
    <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  </div>
  <div>
    <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  </div>
  <div>
    <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  </div>
</div>

jsFiddle demo

Answer 2

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

Глобальная поддержка: 95.71% (источник)

.Container{
  width: 100%;
  display: flex;
  align-items: center;
}

img {
  max-width: 100%;
}

<div class="Container">
  <div class="image-wrapper">
    <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  </div>
  <div class="image-wrapper">
    <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  </div>
  <div class="image-wrapper">
    <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  </div>
  <div class="image-wrapper">
    <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  </div>
  <div class="image-wrapper">
    <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  </div>
  <div class="image-wrapper">
    <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  </div>
  <div class="image-wrapper">
    <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  </div>
  <div class="image-wrapper">
    <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  </div>
</div>

Протестировано с Chrome , Firefox и Edge