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