Question

我正在建立一个网站，我希望背景图像与页面一致，并始终是正确的宽高比。 background-size: cover或contain的问题在于，当它正确调整宽度尺寸时，如果浏览器的宽高比高于背景图像，则会开始垂直平铺。

所以我想我会编写一个jQuery函数来解决这个问题，它对我很有用：

$(window).resize(resizeBg);

function resizeBg(){
    var winWidth = window.innerWidth;
    var winHeight = window.innerHeight;
    var aspectRatio = winWidth/winHeight;
    var imageRatio = 1920/1200;
    if(aspectRatio < imageRatio)
        $("body").css("background-size", "auto " + winHeight + "px");
    else
        $("body").css("background-size", winWidth + "px auto");
}
resizeBg();

但是在我把它放到现场之前，我只是想问一下是否有人知道更好的方法来做这个或者我可以清理这个功能的方法。

感谢。

Answer 1

background-size: auto;在这里工作正常，您只需要指定background-repeat: no-repeat;和background-position: center。希望这会有所帮助。

Answer 2

有几种不同的方法可以实现这一目标。我通常会尝试坚持使用CSS。这只是一种css方法。

HTML

<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>

CSS

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}

#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

在csstricks.com帖子上，它探讨了所有各种方式，包括优缺点+演示。我在探索这个问题时发现它很有用。

http://css-tricks.com/perfect-full-page-background-image/

背景图像缩放

2 个答案: