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

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.

CodePudding user response：

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: 400px;
  height: 400px;
}

.circle {
  height: 100%;
  width: 100%;
  background: red;
  border-radius: 100%;
}

HTML

    <div >
      <div ></div>
    </div>

CodePudding user response：

Set the height of the circle element to 100% (ie the height of its container) and set the width by setting aspect-ratio to 1 / 1.

.container {
  height: 30vh;
  width: 40vw;
  background-color: pink;
}
.circle {
  height: 100%;
  aspect-ratio: 1 / 1;
  background-color: black;
  border-radius: 50%;
}

<div ><div ></div><div>