JSFiddle - React, Tailwind, and code Playground

HTML

<div class="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:220px;
  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: 100px;
  height: 100px;
}

.image{
  display:none;
}

JavaScript

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

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

    imgNewHeight = document.querySelector('.wrapper').height,

    imgNewWidth = document.querySelector('.wrapper').width,

    widthRatio = imgNewWidth / imgNaturalWidth,

    heightRatio = imgNewHeight / imgNaturalHeight,
    
    ratio;

if ( widthRatio < heightRatio ) {
  ratio = widthRatio;
}else{
  ratio = heightRatio;
}

var fixed = ratio * 300;

document.querySelector('.overlay').style.width = fixed;

document.querySelector('.overlay').style.height = fixed;