Как разместить квадрат в прямоугольнике, чтобы он соответствовал его высоте? ⇐ CSS

[Anonymous]

Предположим, у нас есть адаптивный прямоугольник. Мне нужно поместить квадратный элемент в прямоугольник, и он должен составлять 100% его высоты. Как вы могли бы сделать это только с помощью CSS (без SVG и JS, без фиксированных размеров)? Другими словами: сделать ширину дочернего элемента равной высоте родительского элемента?
Это легко сделать, используя SVG в качестве дочернего элемента, используя свойство viewbox, но мне нужно чистое решение CSS.

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

I'm 100% of parent's height but also I'm not square

Подробнее здесь: https://stackoverflow.com/questions/759 ... its-height