javascript - CSS JQuery 在容器内旋转图像

Question

我正在尝试旋转容器内的图像。

容器宽度必须有限制，高度也应该有限制。

我能够使用以下代码完成它，但其中一张图片存在问题。

当图像 2 横向旋转或旋转 45 度时，它会跳出边界。

它适用于其他图像。

我做错了什么？

var   degrees = 0;

function x () {

var setRotator = (function () {

    var setRotation,
        setScale,
        offsetAngle,
        originalHeight,
        originalFactor;

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

    getScale = function (degrees) {

        var radians = degrees * Math.PI / 180,
            sum;

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

        return (originalHeight / Math.cos(sum)) / originalFactor;
    };

    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()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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="width:100%;height:100%;border-style:dotted;border-color:red;">
  </DIV>
</DIV>

Answer 1

您需要将图像绝对定位在 div 内并编辑比例，使其为正且不大于 1。我这里有一个工作版本:https://jsfiddle.net/e9h30w1z/

我已经添加了这个 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%;
}

我编辑了在 setRotation 方法中添加的 CSS 规则以包含 translate(-50%)(这是图像定位的一部分)

并且我将 getScale 方法的返回语句更改为以下内容:

scale = (originalHeight / Math.cos(sum)) / originalFactor;
return (Math.abs(scale) > 1) ? 1 : Math.abs(scale);

请注意，负比例会翻转图像，这就是我的一次尝试开始跳过位置的原因。