@lleballex

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

Мне нужно поставить ширину у элемента, равную его высоте.
Есть такой 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; не нужен. Мне надо именно от высоты задать ширину.
  • Вопрос задан
  • 114 просмотров
Пригласить эксперта
Ответы на вопрос 3
@Eduard07
.box__child {
background: goldenrod;
width: 50px;
height: 100%;
border-radius: 50%;
}
Ответ написан
@fronttrty
как вариант написать что ширина равна 50px ( width: 50px;).
Ответ написан
copyhold
@copyhold
сгуглено отсюда
.box {
width: 313px;
}
.box::after {
display: block;
content: '';
padding-bottom: 100%;
}
.box__child {
position: absolute;
with: 100%;
height: 100%;
}

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы