Question

我目前正在开发一个项目，该项目需要带有背景图像的div a才能调整到浏览器的窗口高度。该部分有效，但我依旧根据我的代码改变后台大小的css类：

$(document).ready(function() {

  var mydivs = $("section#bottle,#bottle>div:nth-of-type(1)"), w = $(window);

  w.bind("load resize",function() {
        var windowHeight = $(window).height();
        var windowWidth = 'auto';
        mydivs.css({width:w.width(),height:w.height()});
        mydivs.css({ backgroundSize : windowWidth + ' ' + windowHeight });

  });

}）

Answer 1

为此使用css

  <style> 


      html { 
          background: url(images/bg.jpg) no-repeat center center fixed; 
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
      }


</style>

Answer 2

可以尝试使用css background-size:cover和/或background-size:100%。

要处理偏移/宽高比和各种尺寸，我们可以将图像设置得比我们需要的更大（给它'播放'），然后设置超过百分比，例如。

background-size:120%

Answer 3

我在这类问题上遇到的关键问题是css jquery，如下例所示：

.css({backgroundSize: '400px 300px'});//won't work
.css(backgroundSize,'400px 300px');//works

所以，首先尝试更改

mydivs.css({ backgroundSize : windowWidth + ' ' + windowHeight });

使用：

mydivs.css( backgroundSize , windowWidth + ' ' + windowHeight);

如果不是您遇到问题，请尝试以下方法：

$(document).ready(function() {

  var mydivs = $("section#bottle,#bottle>div:nth-of-type(1)");

  w.bind("load resize",function() {
        var windowHeight = $(window).height();
        var windowWidth = 'auto';
        mydivs.css({width:windowWidth + 'px',height:windowHeight + 'px'});
        mydivs.css({ backgroundSize : windowWidth + 'px' + ' ' + windowHeight + 'px' });

  });

})

使用窗口大小调整背景图像大小

3 个答案: