jquery - resizing-script によってサイズ変更された後、画像が上に移動します

Question

イメージがあります

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

対応するsticktofooterクラスのcssは

.sticktofooter {
    position:fixed;
    bottom:0px;
    right:1%;
    z-index:99;
}

目的は、イメージがウィンドウの下部に固定されることであり、(幸いなことに) 機能します!

ただし、問題は私のサイズ変更スクリプトです...私はこの機能を持っています:

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 クラスが機能することdoimgheight()です (単にコメントすることによって)。スクリプトと css の両方を有効にすると、画像はページの下部に固定されなくなり、上部に固定されます155px(ただし、画像は適切にスケーリングされています)。

もちろん、(in .sticktofooter)bottom:0px;を に変更するだけbottom: -155pxで、ページの読み込み時に機能しますが、ウィンドウのサイズを変更すると (したがって、スクリプトが画像のサイズを変更します)、ウィンドウの下部と画像の間の距離が再び増加します(そして、ウィンドウが最初の元の位置に再びスケーリングされると減少します) .