Creating a circle in a container, according to height. CSS, HTML

Question

I want to create a circle in a container, but the container height can change, but I still want the circle to have the same height as the container.

Is that possible? I only know of solutions when I know the height, width in pixels.

Answer 1

Have a look at this codesandbox

The element with class circle will get the height of the container element always.

CSS

container {
  border: 1px solid #000000;
  width: 600px;
  height: 400px;
}

.circle {
  height: 100%;
  /*width: 100%;  You no longer need it when using aspect-ratio*/ 
  aspect-ratio: 1 / 1;
  background: red;
  border-radius: 100%;
}

HTML

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