Как сделать, чтобы круглая фотография уменьшалась при изменении экрана?

Question

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

Буду благодарен за помощь, 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>

Answer 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>

БЛОГ НА HUSL

Как сделать, чтобы круглая фотография уменьшалась при изменении экрана?

Ответы (1 шт):