Ширина div в процентах, как сделать такую же высоту?

[Inf1n1tI]

Здравствуйте, есть такая часть макета: https://yadi.sk/i/P61hKvSyeZaHs

 

Хочется сделать ее адаптивной, поэтому делаю такую верстку: http://jsfiddle.net/pv6ektx0/

 

Но вот проблема в том, что нужно задать высоту блока без картинки такую же, как и его ширина, не подскажите как это сделать? если возможно, то желательно без JS, но это не критично.

[Aleksandr.L]

Но вот проблема в том, что нужно задать высоту блока без картинки такую же, как и его ширина, не подскажите как это сделать? если возможно, то желательно без JS, но это не критично.

 

http://jsfiddle.net/Ljk23a2x/

[psywalker]

Вдруг.

[Aleksandr.L]

psywalker, изящно. Надо запомнить

[psywalker]

psywalker, изящно. Надо запомнить

[Inf1n1tI]

Вдруг.

Но, к сожалению, ваш вариант не работает, если в див поместить текст. Он начинает расползаться по высоте. С этим можно как-то бороться средствами CSS?

[mrnobody]

http://jsfiddle.net/mrnobody/Ljk23a2x/3/

[TuTaHuKk]

а так

 

http://jsfiddle.net/Ljk23a2x/4/

Edited February 11, 2015 by TuTaHuKk

[Inf1n1tI]

Всем большое спасибо, теперь возникла потребность выровнять текст в таком диве по центру и по вертикали и по горизонтали, проблемка с вертикалью, не подскажете как решить?

[mrnobody]

https://jsfiddle.net/mrnobody/Lfomxy8k/embedded/result/

[TuTaHuKk]

https://jsfiddle.net/Ljk23a2x/7/