Как сделать квадратный блок с заданной высотой в 100% на чистом CSS?

Question

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

Много вариантов есть, как сделать квадратный блок, если ширина 100%.

Вопрос, как сделать блок квадратным, если высота 100%? Сложность еще состоит в том, что блок, который содержит нужный нам блок-квадрат имеет фиксированную ширину (которая меньше высоты) и плавающую высоту 100% по родителю.

Надеюсь, понятно выразился... Спасибо за ответы.

Comments

[Sergiu Mitu]

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

фиксированную ширину, которая меньше высоты - соответсвенно никак.

[Антон Спирин]

JavaScript

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

Антон Спирин, спасибо за ответ. JavaScript не вариант. Хотел найти CSS рецепт...

[Антон Спирин]

Ярослав Алексеенко, добавил ответ. Кажется, это единственный вариант решения без JS.

Answer 1

[Антон Спирин]

Вариант решения с прозрачной, квадратной png:base64 подложкой.
https://jsfiddle.net/rockon404/44957ne3/

Comments

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

Спасибо... Этот вариант я и использовал. Хоть и сам додумался до этого, но отметил решением, так как оно реально единственное не требующее Javascript.

Answer 2

[pantsarny]

padding-right: 100%?

Comments

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

Неа