0

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

Буду благодарен за помощь, Senior'ы ;-)

section {
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  
  background: aqua;
}

.text {
  margin-left: 30px;
}
<section>
  <div class='circle'></div>
  <div class='text'>Бать, тебе нормально?</div>
</section>

1 ответ 1

1

Уберите height и добавьте aspect-ratio: 1 / 1;

ps: wrapper добавил для ресайза

.wrapper {
  border: 1px solid black;
  resize: both;
  overflow: auto;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  width: 300px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: aqua;
}

.text {
  margin-left: 30px;
}
<div class="wrapper">
  <section>
    <div class='circle'></div>
    <div class='text'>Бать, тебе нормально?</div>
  </section>
</div>

1
  • Всё работает правильно. Благодарю, за помощь ^_^
    – AlexMan
    12 мар 2022 в 18:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.