Как сделать с помощью HTML + CSS такую конструкцию с изменяющейся квадратной картинкой?

Question

[wildsnowgirl]

Инлайновый блок, внутри квадратная картинка и контент, высота картинки должна меняться в зависимости от высоты контента, при этом оставаясь квадратной, html+css.
Иллюстрация: sketchtoy.com/65306776

Comments

[Денис Инешин]

Иллюстрация отличная)

[Евгений Петров]

Задумайтесь, вот есть некоторое количество строк из длинных слов.
При уменьшении ширины блока происходит перенос и появляется новая строка. Высота картинки выросла, но и ширина также увеличилась. Размер области с текстом сузился и появился новый перенос, что повлекло увеличение размеров картинки и уменьшение ширины области с текстом. А если появится новый перенос?..
Звучит, как песня про белого бычка.

Answer 1

[Ярослав Алексеенко]

Дело в том, что у этой конструкции есть точка, в которой контент будет увеличиваться, а место для размещения его, уменьшаться. Лучше взять за основу левый и правый блоки table-cell, левому задать background-size:cover и фото поставить на BG.

Comments

[wildsnowgirl]

ок, а можно сделать левый блок квадратным хотя-бы до достижения этой точки?

Answer 2

[kn1ght_t]

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