Как задать ширину элемента, равную его высоты в CSS?

Question

[vilaugra]

Мне нужно поставить ширину у элемента, равную его высоте.
Есть такой HTML:

<div class="box">
	<div class="box__child"></div>
</div>

CSS:

.box {
	width: 300px;
	height: 50px;
}
.box__child {
	background: goldenrod;
	height: 100%;
	border-radius: 50%;
}

Мне нужно, чтобы у box__child была ширина, равная высоте, т.е. 50px, a не 300px. Можно ли как-то сделать без использования js? Гуглил, ничего не помогает
Вариант просто прописать width: 50px; не нужен. Мне надо именно от высоты задать ширину.

Comments

[WapSter]

Нельзя этого сделать. Используй js

[Михаил]

Реально бред какой-то, если у тебя известна ширина родительского блока то что тебе мешает поделить эту ширину на кол-во дочерних, зачем эти расчеты от высоты

[Антон Литвиненко]

а чем js не угодил? реально же две строчки

Answer 1

[Eduard07]

.box__child {
background: goldenrod;
width: 50px;
height: 100%;
border-radius: 50%;
}

Comments

[vilaugra]

Да нет, мне именно нужно от высоты задать, а не просто прописать

[Eduard07]

lleballex, а для чего ? чтобы понимать какая у вас задача.

[Александр]

Eduard07, какое это имеет отношение к поставленному вопросу?
задача - используя только css и html сделать высоту box_child от box
вы хоть вопрос прочитайте перед тем, как бред писать.

[Eduard07]

Александр, ну так возьмите и ответьте, бред пишите только вы, и помощи никакой.

[Eduard07]

Александр, и так сделать нельзя, как хочет человек, и чтобы подумать над другим решением, я и спросил для чего это нужно.

Answer 2

[copyhold]

сгуглено отсюда

.box {
width: 313px;
}
.box::after {
display: block;
content: '';
padding-bottom: 100%;
}
.box__child {
position: absolute;
with: 100%;
height: 100%;
}

как вы видите решение довольно старое, но всё еще работает.
можно обойтись и без псевдо элементов