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方法的return语句更改为以下内容：

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

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

CSS JQuery旋转容器内的图像

1 个答案: