JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="document.getElementById('testImg').src='https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/smile.svg'">Img1</button>
<button onclick="document.getElementById('testImg').src='https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/juanmontoya_lingerie.svg'">Img2</button>
<button onclick="document.getElementById('testImg').src='https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/php.svg'">Img3</button>
<button type="button" id="btn1" >Rotate Div</button>

<DIV id="container" style=" width:60%;">

  <DIV id="outer" width="100%" style=" position: relative;border-style:dotted;">
    <img id ="testImg" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/smile.svg" style="border-style:dotted;border-color:red;">
  </DIV>
</DIV>

CSS

img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    position: absolute;
    object-fit: contain;
    left: 50%;
    transform: translate(-50%);
}

#outer {
  height: 0;
  padding-bottom: 100%;
}

JavaScript

var degrees = 0;

function x () {
    var setRotator = (function () {
        var setRotation,
            setScale,
            offsetAngle,
            originalHeight,
            originalFactor;

        setRotation = function (degrees, scale, element) {
            element.style.webkitTransform = 'translate(-50%) rotate(' + degrees + 'deg) scale(' + scale + ')';
            element.style.transform = 'translate(-50%) rotate(' + degrees + 'deg) scale(' + scale + ')';
        };

        getScale = function (degrees) {
            var radians = degrees * Math.PI / 180,
                sum,
                scale;

            if (degrees < 90) {
                sum = radians - offsetAngle;
            } else if (degrees < 180) {
                sum = radians + offsetAngle;
            } else if (degrees < 270) {
                sum = radians - offsetAngle;
            } else {
                sum = radians + offsetAngle;
            }

						scale = (originalHeight / Math.cos(sum)) / originalFactor;

            return (Math.abs(scale) > 1) ? 1 : Math.abs(scale);
        };

        return function (inner) {
            offsetAngle = Math.atan(inner.offsetWidth / inner.offsetHeight);
            originalHeight = inner.offsetHeight;
            originalFactor = Math.sqrt(Math.pow(inner.offsetHeight, 2) + Math.pow(inner.offsetWidth, 2));

            return {

                rotate: function (degrees) {
                    setRotation (degrees, getScale(degrees), inner);
                }
            }
        };

    }());

    var //outer = document.getElementById('outer'),
        inner = document.getElementById('testImg'),
        rotator = setRotator(testImg);

    degrees += 45;
    if (degrees >= 360) {
        degrees = 0;
    }

    rotator.rotate(degrees);
}

$('#btn1').click(function(){
    x()
});