背景图像缩放

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/