Почему растягивается изображение при использовании flexbox?

Question

[Антон Кунаковский]

codepen (вверху желаемый результат, но без текста)
Не могу рабобраться в чем проблема. Почему и как контент влияет на блок? Буду рад любой информации, гугление результатов не дало.
upd: При добавлинии в блок контента кроме картинки, картинку растягивает по высоте.

Comments

[Mr Crabbz]

Пожалуйста, переформулируйте вопрос. Непонятно что конкретно вы хотите узнать.

[Антон Кунаковский]

При добавлинии в блок контента кроме картинки, картинку растягивает по высоте. Как с этим справится?

[DanKud]

Ну так, а как вы хотели если у вас стоит width: 100%; height: 100%; для img. Добавляйте текст снизу в отдельных блоках, либо задавайте фиксированную высоту для изображений по максимальной картинке - min-height: 300px;

[Антон Кунаковский]

DanKud, я вижу следствие, но не могу понять как его считает браузет, что от чего зависит

[DanKud]

Антон Кунаковский, что как считает? Размер картинки? Так вы прописали, что 100% всего блока у вас должна занимать картинка. При добавлении в блок только картинок высота блока у вас измеряется по самой высокой картинке. При добавлении еще одного элемента блок расширяется и картинка расширяется вслед за ним, поскольку занимает 100% объема. Добавляя дефолтный параграф блок у вас стал выше на 50px (18px сам текст + 16px маргин сверху и снизу). Следовательно высота картинок у вас стала на 50px больше, потому что она выровнялась по 100% высоте блока, который стал на 50px выше. При этом все что ниже картинки, выходит за пределы блока, потому что 100% его уже занято картинкой.

[Сергей Арсентьев]

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

Answer 1

[Антон Кунаковский]

свою проблему я решил так height: calc(100% - 50px);
где 50 px высота контента (в этом случае параграфа).
Надеюсь хоть кто-то объяснит странное поведение блоков.

Comments

[DanKud]

calc может и неплохое решение, но при стилизации <p> размеры параграфа у вас будут уже другие. Лучше все-таки делать текст отдельными блоками под картинками.

Answer 2

[noeer]

Изображения растягиваются потому, что для них задано свойство height: 100%;
Если нужно сохранить пропорции, замените значение на auto.