jquery动画创建缩放效果与方形矩形图像，以适应窗口的宽度或高度和保持方面

Question

OFF the bat: scale()不是一个有效的选项。

我如何动态地动画我的图像，它的宽度或高度700%回到原来的css width auto和/或height auto从下面的信息

My image (.backone>Img)具有以下实际||实际尺寸:

1024 px宽570 px高度

我的CSS图像如下:

/*this is the same as the window width and height*/
.backone {
width: 100%;
height: 100%;
z-index: 6;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
/** the original CSS dimensions **/
.backone > img {
position: absolute;
width: auto;
height: auto;
min-height: 100%;
min-width: 100%;
left: 50%;
top: 0px;
bottom: auto;
transform: translateX(-50%);
}

在脚本过程中，我添加了高度700%或宽度700%到。backone>Img(当它被隐藏时)取决于窗口的宽度是否大于高度。

现在，当图像显示时，我想把它动画到原来的css"尺寸如上。

我已经试过了:

• 在添加700% width || height之前捕获图像的宽度和高度，这不起作用，因为图像是隐藏的并且还没有到达DOM。

• css动画，但这限制了我返回宽度或高度回到100%，并扭曲图像。

• 几次尝试与jQuery动画得到正确的尺寸，但我可以得到正确的计算。

我可以使用什么计算来将图像返回到其原始尺寸

Answer 1

更新:我把这个问题看错了，我试着把图像的宽度设为700%宽或700%高，然后计算出原来的屏幕宽度或高度。

我所要做的就是获取原始图像并计算适合屏幕的比例。

function getImgdimes() {
var w = $(window).outerWidth();
var h = $(window).outerHeight();
var iw = 1024; // original image width
var ih = 570;  // original image height
var diff = iw / w;
if ((ih / diff) < h) {
var nw = iw / (ih / h);
var nh = h;
$('div.backone img').css('height', '700%');
} else {
var nw = w;
var h = ih / diff;
$('div.backone img').css('width', '700%');
}
var m = [nh, nw];
return m;
}
the animate function uses the m array values m[0] and m[1]

可在此查看:https://ironman-suit.com