JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
  <div class="overlay"></div>
</div>

<img id="img" class="image" src="https://raw.githubusercontent.com/fengyuanchen/cropperjs/master/docs/images/picture.jpg" >

CSS

#wrapper{
  position: relative;  
  background:url('https://raw.githubusercontent.com/fengyuanchen/cropperjs/master/docs/images/picture.jpg');
  height:280px;
  background-repeat: no-repeat;
  background-size: 100%;
}

.overlay{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(0,0,0,0.4);
  border-radius: 50%;
  width: 200px;
  height: 100px;
}

.image{
  display:none;
}

JavaScript

var imgNaturalHeight = document.getElementById('img').naturalHeight,

    imgNaturalWidth = document.getElementById('img').naturalWidth,

    imgNewHeight = document.getElementById('wrapper').clientHeight,

    imgNewWidth = document.getElementById('wrapper').clientWidth,

    widthRatio = imgNewWidth / imgNaturalWidth,

    heightRatio = imgNewHeight / imgNaturalHeight;

document.querySelector('.overlay').style.width = Math.round(widthRatio * 200) + "px";

document.querySelector('.overlay').style.height = Math.round(heightRatio * 200) + "px";