Если попытаться вставить картинку в Flex-контейнер и не указать ширину или высоту картинке, то она будет имет свой реальный размер.
Если вставить одну картинку размером 200х200px, то никаких проблем не будет. Высота Flex-конвейера подстроится под реальный размер картинки и будет 200px.
Если будет хватать ширины Flex-контейнера.
Если ширины контейнера не хватает, то высота контейнера быдет равна реальной высоте картинки, а в ширину картинка выйдет за края контейнера.
Пропорции картинки при этом сохраняются.
По прежнему всё нормально. Контейнер увеличелся в высоту на 400px.
Всё хорошо, если хватает ширины контейнера.
Пропорции картинки нормальные.
С картинками разных размеров начинаются не совсем предсказуемые действия.
Картинка №1 имеет правильную ширину 200px, но по высоте картика вытянулась и исказилась.
Картинка №2 имеет нормальную ширину и высоту.
Секрет кроется в значениях FlexBox модуля по умолчанию.
По гланой оси flex-элементы распологаются, а по перечной оси flex-элементы растягиваются по самому высокому объекту.
Самый высокий flex-элемент здесь - элемент №4. По элементу №4 и выровняются все остальные элементы, при этом искозившийсь.
Не искозится только самый высокий элемент.
Так как ширина Flex-контейнера задана, то картинка растянулась до ширины контейнера на 800px, хотя физический размер картинки 200px.
Высота Flex-контейнера не задана, поэтому картинка растянулась на высоту своей реальной пропорции.
Обе картинки растянулись на всю ширину Flex-контейнера. Искажений нет, но картинки сильно перерастянуты и имеют при этом плохое качество.
Это всё происходит, потому что картинки растягиваются на всю ширину поперечной оси, а высота увеличивается автоматически, потому что у Flex-контейнера не задана высота и она может сколь угодно увеличиваться.
Достаточн установить align-items в значение отличное от "stretch" для Flex-контейнера и растягивания по поперечной оси не будет.
Если позволяет ширина flex-контейнера, то картинки будут растягиваться по высоте и принимать свои пропорции по горизонтали.
Не будет геометрических искажении, но все картинки будут одинаковой высоты.
На последней картинке есть баланс высоты и ширины Flex-контейнера.
Если картинки находятся в балансе пропорции, то увеличение ширины Flex-контейнера ни как не повлияет на картинки.
При уменьшении ширины контейнера, ширина Картинки №1 уменьшается до своей реальной ширины, при это картинка искажается по вертикали.
Если ширина каритнок доходит до реальной ширины, а ширина контейнера уменьшается, то картинки больше не уменьшаются, а вылазять за край контейнера.