1

我有头像

<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，它适用于页面加载，但是当我调整窗口大小（因此脚本调整我的图像大小）时，窗口底部和图像之间的距离会再次增加（并在窗口再次缩放到其第一个原始位置时减小）。

4

1 回答 1

1

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

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

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

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

于 2013-09-12T16:35:00.307 回答