Responsive circle that maintains aspect ratio when shrunk

Question

I've made a circle, but I want it to maintain the 1:1 aspect ratio when it's shrunk down so it doesn't look like an oval on mobile

html:

<div class='container'>
  <div class='circle'></div>
</div>

css:

.container {
  display: flex;
  border: 2px solid black;
  justify-content: center;
  align-items: center;
}

.circle {
  width: 500px;
  height: 500px;
  background-color: red;
  border-radius: 50%;
}

Codepen: https://codepen.io/drhectapus/pen/aWMgZx

Answer 1

Use the padding-bottom aspect ratio trick (read more) to get the circle to maintain its 1:1 ratio.

.container {
  display: flex;
  border: 2px solid black;
  justify-content: center;
  align-items: center;
}

.circle {
  width: 500px;
  background-color: red;
  border-radius: 50%;
}

.circle::before {
  content: '';
  display: block;
  padding-bottom: 100%;
}

<div class="container">
  <div class="circle"></div>
</div>

Alternatively, you could specify your circle's width and height in vw (viewport width) units, to have the element maintain the same relative width and height as your browser resizes - like width: 10vw; height: 10vw;.