背景圖像縮放

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/