javascript - 背景图像缩放

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

有几种不同的方法可以实现这一点。我通常会尝试并坚持使用 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/