Как сделать квадратный блок, у которого ширина равна высоте?

Question

[John Doe]

Возможно ли сделать блок (div), у которого ШИРИНА всегда равна ВЫСОТЕ, только средствами html и css, без javascript?

Знаю, что можно сделать так, чтобы ВЫСОТА была равна ШИРИНЕ с помощью padding-top: 100%, но мне нужно сделать адаптив по высоте

ситуация:
у меня строится сетка по одномерному массиву с помощью grid, нужно, чтобы ячейки были квадратными, но если их делать квадратными по принципу высота ячейки равна ширине, то получается, что такая сетка может не поместиться по высоте

Comments

[Ankhena]

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

[Вадим]

Хак с падингом для высоты, а ширину от размера вьюпорта по высоте. Скажем, width: 20vh;

[Дима Долготер]

если паддинг не вариант то js юзай

[John Doe]

Вадим, но vh - это же от высоты окна браузера, а не родительского блока

[Вадим]

John Doe, Ну так Вы хотите сделать адаптивный блок от высоты же? Либо делать резиново, либо делать брэйкпоинты в медиазапросах по высоте и просто менять фиксированные значения.

Answer 1

[Recreator]

aspect-ratio: 1/1