Javascript CSS JQuery在容器内旋转图像

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

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

我能够用下面的代码完成它，但是其中一个图像有一个问题

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

它适用于其他图像

我做错了什么

var度=0；
函数x（）{
变量setRotator=（函数（）{
var setRotation，
设置刻度，
偏移角，
原始高度，
起源因子；
设置旋转=功能（度、刻度、元素）{
element.style.WebKittTransform='旋转（'+度+'度）比例（'+比例+'）；
element.style.transform='rotate（'+degrees+'deg）scale（'+scale+'）；
};
getScale=函数（度）{
var弧度=度*Math.PI/180，
总和
如果（度<90度）{
总和=弧度-偏移角度；
}否则，如果（度<180度）{
总和=弧度+偏移角；
}否则，如果（度<270）{
总和=弧度-偏移角度；
}否则{
总和=弧度+偏移角；
}
返回值（原始高度/数学cos（总和））/originalFactor；
};
返回函数（内部）{
offsetAngle=Math.atan（inner.offsetWidth/inner.offsetHeight）；
原始高度=内。离视；
originalFactor=Math.sqrt（Math.pow（inner.offsetHeight，2）+Math.pow（inner.offsetWidth，2））；
返回{
旋转：功能（度）{
设置旋转（度，getScale（度），内部）；
}
}
};
}());
var//outer=document.getElementById（'outer'），
内部=document.getElementById（'testImg'），
旋转器=设置旋转器（testImg）；
度数+=45；
如果（度>=360）{
度=0；
}
旋转器。旋转（度）；
}
$（'#btn1'）。单击（函数（）{
x（）
});

Img1
Img2
Img3
旋转Div
您需要将图像绝对定位在div中，并编辑比例，使其为正值，且不大于1。我这里有一个工作版本：

我添加了这个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);

请注意，负比例会翻转图像，这就是我的一次尝试开始跳过位置的原因。
您有CSS吗？同时按下Img1/Img 2也不会给出结果，只有错误它不应该给出错误。试试小提琴版谢谢。我修正了密码。看起来是“整洁”代码按钮弄坏了它：/。尝试刷新JSFIDLE代码？修复了上面的代码。您可以发布一个JSFIDLE示例。我似乎无法让它工作注意，如果你有一个旋转的图像（45度），然后交换图像，它仍然可以溢出容器，但这是另一个问题，我不知道你是否想补救。您编写的jQuery在旋转时调整图像的大小，但是添加一点来检查img的更改应该不难。是的，我不想添加太多代码，这只是一个刷新问题。当交换图像时，它确实应该刷新，但为了举例说明，它不是必需的。我看到的问题是，它使图像失去了原来的比例（通过使其呈方形），这正是我试图避免的。。你能检查一下，告诉我这是否更好吗？终于有了一个坐下来的机会，希望这次能成功；它将图像旋转到360度左右，每隔45度旋转一次。让我知道，我会将此链接添加到总体答案中