JSFiddle - React, Tailwind, and code Playground

by ovfiddle

HTML

<div class="container">
  <div class="hot-spot--container">
    <div class="hot-spot"></div>
  </div>
</div>

CSS

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Alexanderplatz_Stadtmodell_1.jpg/1920px-Alexanderplatz_Stadtmodell_1.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
}

.hot-spot--container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.hot-spot {
  background-color: red;
  position: absolute;
  top: 36%;
  left: 39%;
  width: 7%;
  height: 22%;
  opacity: 0.5;
  z-index: 1;
  content: "";
}

JavaScript

var $window = $(window);

var $container = $('.container');
var $hotSpotContainer = $('.hot-spot--container');

var bgHeight = 1368;
var bgWidth = 1920;
var bgRatio = bgHeight / bgWidth;

$(window).resize(resizeHandler);	

resizeHandler();

function resizeHandler() {
  //var _fgWidth = 
  var containerHeight = $container.height();
  var containerWidth = $container.width();
  var containerRatio = containerHeight / containerWidth;

  var xScale = 1,
    yScale = 1;

  if (containerRatio < bgRatio) {
    //fgHeight = containerHeight
    //fgWidth = containerHeight / bgRatio
    xScale = (containerHeight / bgRatio) / containerWidth
  } else {
    //fgHeight = containerWidth / bgRatio
    //fgWidth = containerWidth 
    yScale = (containerWidth * bgRatio) / containerHeight
  }

  var transform = 'scale(' + xScale + ', ' + yScale + ')';

  $hotSpotContainer.css({
    //'background': 'green',
    //'transform': 'translate(-50%, -50%)'
    'transform': transform
  });

  console.log(transform);

}