jquery animate 使用方形矩形图像创建缩小效果以适应窗口宽度或高度并保持纵横比

Posted 2023-05-08

【中文标题】jquery animate 使用方形矩形图像创建缩小效果以适应窗口宽度或高度并保持纵横比

【英文标题】：jquery animate create zoomOut effect with squarish rectangle shaped image to fit window width or height and maintain aspect

【发布时间】：2021-12-06 13:26:36

【问题描述】：

关闭蝙蝠：scale() 不是一个有效的选项。

如何根据以下信息将宽度或高度为 700% 的图像动态动画化回原始 css 宽度自动和/或高度自动。

我的图片 ( .backone > img ) 具有以下实际 ||实际尺寸：

1024 像素宽度 570px 高度

我的图片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%);

在脚本执行过程中，我向 .backone > img 添加了 700% 的高度或 700% 的宽度（当它被隐藏时），具体取决于窗口的宽度是否大于高度.

现在，当图像显示时，我想将其动画化回上面的“原始 css”尺寸。

我尝试过的：

在添加 700% 宽度之前捕获图像的宽度和高度 ||高度，这不起作用，因为图像被隐藏并且尚未到达 DOM。

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

多次尝试使用 jQuery animate 来获得正确的尺寸，但我可以得到正确的计算。

我可以使用哪些计算来将图像恢复到其原始尺寸。

【参考方案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