Квадратная картинка с высотой равной высоте смежного блока, html + css, как?

Question

[wildsnowgirl]

<div class="inline-row">
    <img id="1" class="square-picture">
    <div id="2"></div>
</div>

Нужно что-бы независимо от контента в #2 - картинка оставалась квадратной и во всю высоту внешнего контейнера (зависит от контента в #2), #1 и #2 в одну линию.

Вот все поймете: sketchtoy.com/65306776
Как сделать? Помогите пожалуйста, очень надо!

Comments

[wildsnowgirl]

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

[wildsnowgirl]

sketchtoy.com/65306776

Answer 1

[sugarufc]

Не совсем понял что тебе нужно, но попробуй прописать в стилях img{height: 100%}

Comments

[wildsnowgirl]

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

[sugarufc]

wildsnowgirl: тогда тут без javascript никак думаю

Answer 2

[Александр Таратин]

www.mademyday.de/css-height-equals-width-with-pure...

Comments

[Роман]

шикарное решение