JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Container">
  <img id="test" src="http://via.placeholder.com/1000x678">
</div>

CSS

.Container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#test {
  width: 50%;
  transform-origin: top left;
  transition: transform .3s ease-in-out;
}

JavaScript

// Helper fucntions
const getWindowWidth = () => {
  return Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
}

const getWindowHeight = () => {
  return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
}

// Get element
const El = document.getElementById('test');

// Add listener
El.addEventListener('click', () => {
	// Viewport size
	const viewH = getWindowHeight();
	const viewW = getWindowWidth();
  
  // El size
	const elHeight = El.offsetHeight;
	const elWidth = El.offsetWidth;

	// Scale ratio
	let scale = 1;
  
  // Get how much element need to scale
  // to fill viewport
	// Based on https://stackoverflow.com/a/28475234/1719789 
	if ((viewW / viewH) > (elWidth / elHeight)) {
  	scale = viewW / elWidth;
	} else {
  	scale = viewH / elHeight;
	}

	// Center element
	const x = ((viewW - ((elWidth) * scale)) / 2);
	const y = ((viewH - ((elHeight) * scale)) / 2);

	// matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
	El.style.transform = 'matrix(' + scale + ', 0, 0, ' + scale + ', ' + x + ', ' + y + ')';
});