【问题标题】:Image isn't reflecting its properties图像未反映其属性
【发布时间】:2009-12-30 10:33:17
【问题描述】:

http://grab.by/1rI8

我编写了一些 jQuery 脚本,以便背景图像始终缩放并且永远不会显示空白点。

    function runIt() {
currentHeight = $("#bg").height() //useless for you
currentWidth = $("#bg").width() //useless for you
ccurrentHeight = $("#cover").height() //useless for you
ccurrentWidth = $("#cover").width() //useless for you
wcurrentHeight = $(window).height() //useless for you
wcurrentWidth = $(window).width() //useless for you
$("#auto").empty() //useless for you
$("#auto").append('BG Current Height:"'+currentHeight+'"Width"'+currentWidth+'"<br \>') //useless for you
$("#auto").append('Cover Current Height:"'+ccurrentHeight+'"Width"'+ccurrentWidth+'"<br \>') //useless for you
$("#auto").append('Window Current Height:"'+wcurrentHeight+'"Width"'+wcurrentWidth+'"') //useless for you
if ($("#bg").height() < $(window).height()) {
//  $("#bg").empty() //useless for you
//  $("#bg").append('<img src="'+imgPath+'" style="height:100%" />') //useless for you
        $("#bg").css({
        width: $("#cover").width(),
        height: "auto"
        })
    }
else {
//  $("#bg").empty() //useless for you
//  $("#bg").append('<img src="'+imgPath+'" style="width:100%" />') //useless for you
        $("#bg").css({
        height: $("#cover").height(),
        width: "auto"
        })
    }
}
setInterval(runIt, 50);

有人知道为什么这不能正常工作吗?

谢谢, 瑞士

【问题讨论】:

  • HTML 代码/适用的 CSS 本身将是对这个问题的一个很好的补充......

标签: jquery html css background


【解决方案1】:
    function runIt() {
 winprop = $(window).height() / $(window).width();
 var bgprop = $("#bgimg").height() / $("#bgimg").width();
 if(winprop < bgprop)
 {
         $("#bgimg").css({
         width: $(window).width(),
         height: "auto"
         })
 } else {
         $("#bgimg").css({
         width: "auto",
         height: $(window).height()
         })
    }
}
function doSomething() {
    alert("I'm done resizing for the moment");
};
 runIt();
var resizeTimer = null;
$(window).bind('resize', function() {
    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(runIt, 20);
});

将 Bg 图像赋予它自己的 id。更改图像的大小,而不是 div。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-10-06
    • 1970-01-01
    • 2011-09-11
    • 1970-01-01
    • 1970-01-01
    • 2020-05-02
    相关资源
    最近更新 更多