Question

当我加载网页时，我希望我的背景图像与我的窗口大小完全匹配。我有以下代码。它给了我一个错误：$("body") is null。页面加载，背景有图像，但背景的大小不正确。

  function resizeFrame() 
  {
      alert("resizeFrame");
      var h = window.screen.height;
      var w = window.screen.width;
      $('body').css('background-size', w + 'px ' + h + 'px' );
  }

在此javascript中调整背景图片大小的正确方法是什么？

Answer 1

在页面加载完成后调用该函数。

$(document).ready({
    resizeFrame() 
});

Answer 2

将代码换行以在$(function() { })中调整大小。这将确保在代码执行之前就可以修改DOM了。

$(function() {
   $(window).resize(function() {
       $('body').css('background-size', $(this).width() + 'px ' + $(this).height() + 'px');
   });
});

你应该能够使用CSS ...

body {
    background-size: 100% 100%;
}

假设您的body元素已定义为填充视口。

Javascript使我的背景图像的大小与我的窗口大小相匹配

2 个答案: