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/

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

1 个答案: