背景圖像縮放

我正在構建一個網站，我希望背景圖像與頁面一起縮放，並始終保持正確的高寬比。 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();

但在此之前，我把這個活我只是想詢問是否有人來更好的辦法知道做這個或我可以清理這個功能的方法。

謝謝。

來源

2014-04-03 Jamie Poole

有幾種不同的方法來實現這一點。我通常嘗試並堅持使用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/

來源

2014-04-03 18:42:46 JayD

相關的代碼示例應包括在你的答案，因爲沒有保證鏈接將始終工作。 – Greg

同意並修復 – JayD

謝謝，我沒有使用上面的代碼，但CSS3的方式工作。這個網站是針對特定人羣的，我可以肯定不會少於IE9。所以這是完美的。謝謝！ –

background-size: auto;在這裏應該可以正常工作，您只需指定background-repeat: no-repeat;和background-position: center。希望這可以幫助。

來源

2014-04-03 18:42:31

背景圖像縮放

回答

相關問題