CSS-изображение и заголовок — высота вместе 100 %. ⇐ CSS

[Anonymous]

У меня возникла ситуация, когда изображение должно отображаться с подписью под ним (не перекрываясь). Ни размер изображения, ни длина подписи не известны.

Высота всего элемента рисунка должна составлять 100 %, как показано ниже:



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

Можно ли как-нибудь добиться этого с помощью только CSS?

Я пробовал использовать CSS-таблицы, но со 100% высотой это не работает. Вы можете увидеть мои усилия здесь:

Код: Выделить всё

display: table

http://codepen.io/pju/pen/ZOmdEb

И с flexbox, у которого есть свои свои проблемы.

Код: Выделить всё

display: flex

http://codepen.io/pju/pen/QEJXNZ

Подробнее здесь: https://stackoverflow.com/questions/388 ... 0-together