чтобы изображения не растягивались по любой оси внутри родителя flex, я нашел несколько решений.

вы можете попробовать использовать object-fit на изображении, которое, например

object-fit: contain;

http://jsfiddle.net/ykw3sfjd/

или вы можете добавить flex-specfic правила, которые могут работать лучше в некоторых случаях.

align-self: center;
flex: 0 0 auto;

большинство изображений с внутренние размеры, это естественный размер, как jpeg изображения. Если указанный размер определяет как ширину, так и высоту, пропущенное значение определяется с помощью внутреннего соотношения... - смотри MDN.

но это не работает, как ожидалось, если изображения, которые устанавливаются в качестве прямых элементов flex с текущим Гибкий Модуль Компоновки Коробки Уровень 1, насколько я знать.

см. эти обсуждения и сообщения об ошибках могут быть связаны:

• Flexbugs #14 - хром/адаптируемых блоков внутренняя калибровка не выполнена правильно.
• Firefox Ошибка 972595 - контейнеры Flex должны использовать "flex-basis "вместо" width " для вычисления собственной ширины элементов flex
• Выпуск Хрома 249112 - в Flexbox, позвольте внутреннеприсущим коэффициентам сжатия сообщить главным образом-размер расчет.

---

в качестве обходного пути, вы можете обернуть каждый <img> С <div> или <span> или так.

jsFiddle

.slider {
    display: flex;
}
.slider > div {
    min-width: 0; /*don't forget this line, see the explanation below*/
}
.slider > div > img {
    max-width: 100%; /*or width: 100%; if so the above line won't be required */
    height: auto;
}

<div class="slider">
    <div><img src="http://www.placebacon.net/400/300"/></div>
    <div><img src="http://www.placebacon.net/400/300"/></div>
    <div><img src="http://www.placebacon.net/400/300"/></div>
    <div><img src="http://www.placebacon.net/400/300"/></div>
</div>

4.5 подразумеваемый минимальный размер элементов Flex

чтобы обеспечить более разумный минимальный размер по умолчанию для гибкий график работы пунктов, эта спецификация вводит новое авто значение в качестве начального значение мин-ширина и мин-высота свойства, определенные в CSS 2.1.

---

кроме того, вы можете использовать CSS table макет вместо этого, который вы получите аналогичные результаты, как flexbox, он будет работать на нескольких браузерах, даже в IE8.

jsFiddle

.slider {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
.slider > div {
    display: table-cell;
    vertical-align: top;
}
.slider > div > img {
    max-width: 100%;
    height: auto;
}

<div class="slider">
    <div><img src="http://www.placebacon.net/400/300"/></div>
    <div><img src="http://www.placebacon.net/400/300"/></div>
    <div><img src="http://www.placebacon.net/400/300"/></div>
    <div><img src="http://www.placebacon.net/400/300"/></div>
</div>

нет необходимости добавлять содержащий div.

значение по умолчанию для свойства css "align-items "- это" stretch", которое вызывает растягивание ваших изображений до полной исходной высоты. Установка свойства css " align-items "в" flex-start " устраняет вашу проблему.

.slider {
    display: flex;
    align-items: flex-start;  /* ADD THIS! */
}

Я играл вокруг flexbox в последнее время, и я пришел к решению для этого через эксперименты и следующие рассуждения. Однако на самом деле я не уверен, что это именно то, что происходит.

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

Так как высота тега img получается из самого изображения, то установка высоты до 0% может сделать что-то. (здесь я не совсем понимаю, что именно...но это имеет смысл для меня, что он должен это исправить)

демо

(помните, видел его здесь первым!)

.slider {
    display: flex;
}
.slider img {
    height: 0%;
    width: 100%;
    margin: 0 5px;
}

работает только в chrome еще

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

.container{display:flex; height:100%;} img{width:100%;height:auto;}

затем в html ваш контейнер будет обернуть изображение тега

<div class="container"><img src="image.jpg" alt="image" /></div>

эта работа для IE и других браузерах

у меня просто была такая же проблема. Используйте flex align для центрирования элементов. Вы должны использовать align-items: center вместо align-content: center. Это будет поддерживать соотношение сторон, в то время как align-content не будет поддерживать соотношение сторон.