JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div class="box">
  <img src="https://i.imgur.com/tRpmQ0J.jpg" alt="">
</div>

  <img src="https://i.imgur.com/tRpmQ0J.jpg" alt="">

CSS

.box {
  width: 200px;
  height: 400px;
  overflow: hidden;
  box-shadow: 0 0 0 1px black;
}

.box img {
  width: 400px;
  height: 400px;
}

JavaScript

{
	const img = document.querySelector('img');

  const a = [.1, .2]
  const b = [.4, .8];
  
  const diff = Math.max(b[0] - a[0] , b[1] - a[1]);
  
  const transform = [];
  transform.push(`scale(${1 / diff})`);
  
  const x = a[0] * 100;
  const y = a[1] * 100;
  transform.push(`translate(-${x}%, -${y}%)`);
  
  img.style.transformOrigin = '0 0';
  img.style.transform = transform.join(' ');
}