Jquery 通过调整大小脚本调整大小后，图像向上移动

我有一个形象

<img onclick="$('#daltonempire').popover('toggle');" id="theimg" alt="Dalton Empire" class="sticktofooter" src="img/DE%20Logo.png" width="529" height="544"/>

其目的是将图像固定在窗口底部，并且（幸运的是）它可以工作

然而，问题是我的调整脚本。。。 我有一个函数：

function doimgheight(){
        thegoodheight = Math.round($(window).height() / 4);
        thescale = thegoodheight / 544  ;
        $('#theimg').css({
            "-webkit-transform": "scale(" + thescale + ")",
            "-moz-transform": "scale(" + thescale + ")",
            "-o-transform": "scale(" + thescale + ")",
            "transform": "scale(" + thescale + ")"
        });
}

在

$（document.ready（）

和

$（window.resize（）

期间调用。 其目的是在页面加载时，使图像（544px）为窗口大小的1/4。 同样在

$（window.resize（）

，它将使图像的大小为调整大小的窗口大小的1/4

脚本也可以很好地工作，它平滑地将图像大小调整为窗口大小的1/4

问题是，css类只有在禁用

doimghight（）

函数（只需对其进行注释）时才起作用。当脚本和css都启用时，图像不再固定在页面底部，而是位于底部上方的

155px

（但是，图像已正确缩放）

---

当然，我可以更改（在

.sticktofooter

中）

底部：0px

到

底部：-155px

，它可以在页面加载时工作，但是当我调整窗口大小（因此脚本调整图像大小）时，窗口底部和图像之间的距离将再次增加（当窗口再次缩放到其第一个原始位置时，距离将减小）.

发生这种情况是因为您正在使用CSS3变换来缩放图像。图像的“真实”高度没有改变，因此就浏览器而言，它是按要求用

bottom:0px

固定的

要解决此问题，可以移动图像的变换原点。。。但通过CSS更改实际宽度和高度要容易得多：

$('#theimg').css({
    'height': thegoodheight,
    'width': 'auto' /* maintains proportions */
});

---

发生这种情况是因为您正在使用CSS3变换来缩放图像。图像的“真实”高度没有改变，因此就浏览器而言，它是按要求用

bottom:0px

固定的

要解决此问题，可以移动图像的变换原点。。。但通过CSS更改实际宽度和高度要容易得多：

$('#theimg').css({
    'height': thegoodheight,
    'width': 'auto' /* maintains proportions */
});

---

这不是因为调整大小的原点/锚点位于图像底部的中心，而不是中间？这是我的猜测，是的。这不是因为调整大小的原点/锚点位于图像底部的中心，而不是中间？这是我的猜测，是的。