.box {
  width: 200px;
  height: 200px;
  overflow: hidden;
  resize: both;
  background: blue;
  box-shadow: 0 0 0 200vmax red;
  clip-path: circle(71%);
  margin: 100px auto;
}

<div class="box"></div>

.box {
  width: 200px;=
  resize: both;
  clip-path: circle(calc(71% + 10px));
  margin: 100px auto;
  position: relative;
  font-size:35px;
  color:#fff;
}
/* the background layer */
.box::before {
  content:"";
  position: absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:blue;
}

/* the image layer */
.box::after {
  content:"";
  position: fixed; /* to make sure the image cover all the screen */
  z-index:-2;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:url(https://picsum.photos/id/1015/1000/1000) center/cover no-repeat;
}

<div class="box" contenteditable="true"> Edit this<br>text </div>

// circumscriber for variable size divs
function circumscriber() {

  // for each variable size div on page
  $(".variable-size").each(function() {

    // get the variable size div content width and height
    let width = $(this).outerWidth();
    let height = $(this).outerHeight();

    // get the diameter for our pefect circle based on content size
    let diameter = Math.sqrt(width ** 2 + height ** 2);

    // extra 15 pixel circle edge around variable size div
    let edge = 15;
    
    // add current circle size width css
    $('.circle', this).css({
      'width': (diameter + (edge * 2)) + 'px'
    })

  });

}

// run the circumscriber (you might wana do this on ready)
circumscriber();

// if the window is resized responsively
$(window).on('resize', function() {
  circumscriber();
});


// for demo purpose to fire circumscriber when resizing content
// not needed for real thing
$('.content').on('input', function() {
  this.style.height = "";
  this.style.height = ( this.scrollHeight - 30 ) + "px";
  circumscriber();
}).on('mouseup', function() {
  circumscriber();
});

/* variable size container to be circumscribed by circle */
/* none of these styles are required, this just to center the variable size div in the window for demo purposes */
.variable-size {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* resizable text area for demo */
/* again not needed */
.variable-size .content {
  padding: 15px;
  background: #fff;
  resize: both;
  overflow: auto;
  color: #000;
  border: none;
  width: 200px;
  font-weight: bold;
}

.variable-size .content:focus {
  outline: 0;
}

/* child circle div css */
.variable-size .circle {
  position: absolute;
  background-image: url('https://i.imgur.com/2dxaFs9_d.webp?maxwidth=640&shape=thumb&fidelity=medium');
  background-position: center center;
  z-index: -1;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s ease;
  width: 0;
}

/* fast way to make circle height the same as current width */
.variable-size .circle:before {
  display: block;
  content: '';
  width: 100%;
  padding-top: 100%;
}

/* demo window css */
HTML,
BODY {
  height: 100%;
  min-height: 100%;
  background: black;
  position: relative;
  font-family: "Lucida Console", Courier, monospace;
}

<div class="variable-size">
  <textarea class="content" rows="1" placeholder="TYPE TEXT OR RESIZE ME &#8600;"></textarea>
  <div class="circle"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

.square {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-height: 100px;
  border-radius: 50%;
  background: black;
  background-size: 100% 100%;
  padding: 20px;
}

.content {
  width: 300px;
  min-height: 100px;
  background: tomato;
}

.emptyDiv {
  flex-basis: 120px
}

<div class="square">
  <div class="emptyDiv"></div>
  <div class="content">
    Hello!<br>
    <br><br><br>This has a variable height but fixed width<br><br><br>Hello
  </div>
  <div class="emptyDiv"></div>
</div>

.square {
  position: absolute;
  top: 50%;
  display: inline-block;
  left: 50%;
  transform: translate(-50%, -50%);
  min-height: 100px;
  border-radius: 50%;
  background: url('https://i.imgur.com/2dxaFs9_d.webp?maxwidth=640&shape=thumb&fidelity=medium');
  background-size: 100% 100%;
  padding: 20px;
}

.content {
  width: 300px;
  min-height: 100px;
  background: tomato;
}

<div class="square">
  <div class="content">
    Hello!<br>
    <br><br><br>This has a variable height but fixed width<br><br><br>Hello
  </div>
</div>