jquery - 通过调整大小脚本调整大小后图像向上移动

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 (但是，图像已正确缩放).

当然，我可以将(在 .sticktofooter 中)bottom:0px; 更改为 bottom: -155px，它可以在页面加载，但是当我调整我的窗口大小时(因此脚本调整我的图像大小时)，窗口底部和图像之间的距离将再次增加 (并且当窗口被缩放到它的第一个，原始位置)。

Answer 1

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

要解决这个问题，您可以移动图像的变换原点...但是通过 CSS 更改实际宽度和高度会容易得多:

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

http://jsfiddle.net/mblase75/AyfN6/