JSFiddle - React, Tailwind, and code Playground

by Thornton_Fernbacher

HTML

<div id="outer">

  <div id="container">
   
    <div style="bottom: 0; right: 0">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>

  </div>

</div>

CSS

body {
  margin:0;
}
#outer {
  width:100vw;
  height:100vh;
}

#container {
  position:relative;
  width: 3000px;
  height: 1687px; 
  background: url(https://localhost:3000/static/map.svg);
  left: 50%;
  top: 50%;
   -webkit-transform-origin: center center;
          transform-origin: center center;
}
#container div {
  position:absolute;
  text-align:center;
  background:red;
  border-radius:50%;
  width:50px;
  height:50px;
}

JavaScript

const width = 3000,
			height = 1687;
const outer = document.getElementById('outer'),
			container = document.getElementById('container');


function resize() {
	let scale = Math.min(
  	outer.offsetWidth / width,
    outer.offsetHeight / height
  );
  container.style.transform = "translate(-50%, -50%) scale(" + scale +")";
}

resize();
 window.addEventListener("resize", resize);