Почему растягивается изображение при использовании flexbox?
codepen (вверху желаемый результат, но без текста)
Не могу рабобраться в чем проблема. Почему и как контент влияет на блок? Буду рад любой информации, гугление результатов не дало.
upd: При добавлинии в блок контента кроме картинки, картинку растягивает по высоте.
Ну так, а как вы хотели если у вас стоит width: 100%; height: 100%; для img. Добавляйте текст снизу в отдельных блоках, либо задавайте фиксированную высоту для изображений по максимальной картинке - min-height: 300px;
Антон Кунаковский, что как считает? Размер картинки? Так вы прописали, что 100% всего блока у вас должна занимать картинка. При добавлении в блок только картинок высота блока у вас измеряется по самой высокой картинке. При добавлении еще одного элемента блок расширяется и картинка расширяется вслед за ним, поскольку занимает 100% объема. Добавляя дефолтный параграф блок у вас стал выше на 50px (18px сам текст + 16px маргин сверху и снизу). Следовательно высота картинок у вас стала на 50px больше, потому что она выровнялась по 100% высоте блока, который стал на 50px выше. При этом все что ниже картинки, выходит за пределы блока, потому что 100% его уже занято картинкой.
недавно сталкивался с подобной проблемой, заметил, что если задать в свойствах flexbox параметр align-items то высота и ширина картинки становятся оригинальными, не растягивается, может пригодится кому.
свою проблему я решил так height: calc(100% - 50px);
где 50 px высота контента (в этом случае параграфа).
Надеюсь хоть кто-то объяснит странное поведение блоков.
calc может и неплохое решение, но при стилизации <p> размеры параграфа у вас будут уже другие. Лучше все-таки делать текст отдельными блоками под картинками.
