通过调整大小脚本调整大小后图像向上移动答案

【问题标题】：Image moves up after being resized by resizing-script通过调整大小脚本调整大小后图像向上移动
【发布时间】：2013-09-12 16:23:45
【问题描述】：

我有一张图片

<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() 函数时才有效（只需对其进行评论）。当 script 和 css 都启用时，图像不再固定在页面底部，而是底部上方的155px（但是，图像正在正确缩放）。 p>

当然，我可以将（.sticktofooter）bottom:0px; 更改为 bottom: -155px，它适用于页面加载，但是当我调整窗口大小（因此脚本调整我的图像大小）时，两者之间的距离窗口底部和图像将再次增加（当窗口再次缩放到其第一个原始位置时，图像将减小）。

【问题讨论】：

标签： jquery css image window image-resizing

【解决方案1】：

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

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

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

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

【讨论】：

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