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

Question

[ktotitakoy]

ТАКОЕ ВОЗМОЖНО ВООБЩЕ СДЕЛАТЬ?

Comments

[iBird Rose]

ну на js дублируй размер на другую сторону, к примеру.

Answer 1

[Rustam Bainazarov]

https://css-tricks.com/aspect-ratio-boxes/

Answer 2

[Сергей delphinpro]

Как сжать квадратный блок?
https://jsfiddle.net/DelphinPRO/od427uqr/
Здесь детальнее об этом методе https://css-tricks.com/aspect-ratio-boxes/

Скоро (?) будет доступно новое свойство aspect-ratio.
Но пока его еще нет.

Answer 3

[Vladislav]

Оптимальное решение на JavaScript, это если у тебя несколько квадратов нужно сделать в одном родителе, а если один выдерни весь код из цикла, а в переменной убери querySelectorAll и поставь просто querySelector вообщем если шаришь в циклах, разберешься, что и где поменять

let boxResize = document.querySelectorAll('.js-resize-box') let boxResizeHeight = () => { boxResize.forEach(element => { element.style.height = getComputedStyle(element).width }); } boxResizeHeight()