Чтобы сделать высоту элемента равной его ширине в CSS, можно использовать свойство padding-top или padding-bottom и задать значение в процентах от ширины элемента.
Например, если нужно сделать квадратный блок, можно задать ширину и высоту в процентах и добавить padding-top или padding-bottom со значением 100%:
.square {
width: 50%;
height: 0;
padding-top: 50%;
}
В этом примере блок будет занимать половину ширины родительского элемента и будет иметь высоту, равную половине ширины блока.
Также можно использовать свойство aspect-ratio, которое задает соотношение сторон элемента. Например, чтобы сделать квадратный блок, можно задать aspect-ratio: 1 / 1;:
.square {
width: 50%;
-ratio: 1 / 1;
}
В этом примере блок будет занимать половину ширины родительского элемента и будет иметь высоту, равную ширине блока.





