jQuery的背景填充100％的屏幕，但切斷了圖像的一部分

Question

我已經使用下面的代碼來填充整個頁面的屏幕。我真正需要的是讓它完全填充高度，無所謂它沒有完全填充寬度。我只需要將背景圖片居中放置在頁面中間，頁面高度爲100％。兩邊可以有空間，我不介意。當然，我需要保持比例。我試圖修改代碼，但我不確定我可以這樣做。我在這一次失去了一些時間，我相信對於比我更有經驗的人來說，這將非常容易。提前感謝您的任何想法。 的代碼是在這裏：

<img src="http://test.tucado.com/4play/_images/cdj2000-start.jpg" id="bg" alt=""> 
    <a href="home.html"><div id="wheel-enter"><img src="http://test.tucado.com/4play/_images/empty.png" width="100" height="100" /></div></a> 

CSS：

body{ 
    height:100%; 
    width:100%; 
    margin:0;padding:0; 
    overflow:hidden; 
} 


#bg { position: fixed; top: 0; left: 0; } 
.bgwidth { width: 100%; } 
.bgheight { height: 100%; } 

#cdj2000 { 
    position:fixed; 
    top: 50%; 
    left: 50%; 
    width:700px; 
    height:500px; 
    margin-left: -350px; 
    margin-top: -250px; 
} 

#wheel-enter { 
    position:fixed; 
    top: 50%; 
    left: 50%; 
    width:100px; 
    height:100px; 
    margin-top: -50px; 
    margin-left: -50px; 
} 


img{ 
    border:none; 
} 

和jQuery：

$(window).load(function() {  

    var theWindow  = $(window), 
     $bg    = $("#bg"), 
     aspectRatio  = $bg.width()/$bg.height(); 

    function resizeBg() { 

     if ((theWindow.width()/theWindow.height()) < aspectRatio) { 
      $bg 
       .removeClass() 
       .addClass('bgheight'); 
     } else { 
      $bg 
       .removeClass() 
       .addClass('bgwidth'); 
     } 

    } 

    theWindow.resize(function() { 
     resizeBg(); 
    }).trigger("resize"); 

}); 

BTW。我不得不把空圖像作爲按鈕，因爲某些原因在div沒有工作。奇怪的事情。當我爲此div添加邊框時，它開始工作，但操作僅在邊框上......這很奇怪。當然，我不想要一個邊框，因爲它看起來是被點擊的背景的一部分。

的jsfiddle這裏：>> jsFiddle <<

謝謝你的任何想法。如果你想保持縱橫比，刪除，改變寬度行

var theWindow = $(window) 

function resizeBg() { 
    $("#bg").css('width', $('html').outerWidth()); 
    $("#bg").css('height', $('html').outerHeight()); 
} 

theWindow.resize(function() { 
    resizeBg(); 
}).trigger("resize"); 

：

Answer 1

出於某種原因，的jsfiddle不工作，但這裏是生成代碼，測試頁上的工作原理：

<style> 
    body{ 
    height:100%; 
    width:100%; 
    margin:0;padding:0; 
    overflow:hidden; 
} 


#bg { position: fixed; top: 0; left: 50%;} 
.bgwidth { width: 100%; } 
.bgheight { height: 100%;} 

#cdj2000 { 
    position:fixed; 
    top: 50%; 
    left: 50%; 
    width:700px; 
    height:500px; 
    margin-left: -350px; 
    margin-top: -250px; 
} 

#wheel-enter { 
    position:fixed; 
    top: 50%; 
    left: 50%; 
    width:100px; 
    height:100px; 
    margin-top: -50px; 
    margin-left: -50px; 
} 


img{ 
    border:none; 
} 
</style> 
<img src="http://test.tucado.com/4play/_images/cdj2000-start.jpg" id="bg" alt=""> 
    <a href="home.html"><div id="wheel-enter"><img src="http://test.tucado.com/4play/_images/empty.png" width="100" height="100" /></div></a> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> 
    <script> 
    $(window).load(function() {  

    var theWindow  = $(window), 
     $bg    = $("#bg"), 
     aspectRatio  = $bg.width()/$bg.height(); 

    function resizeBg() { 
      $bg 
       .removeClass() 
       .addClass('bgheight').css('margin-left',$bg.width()/2*-1); 
    } 

    theWindow.resize(function() { 
     resizeBg(); 
    }); 
    resizeBg(); 

}); 
</script> 

你是對的aspectRatio測試沒有理由的窗戶。既然你想100％的窗口高度，不管發生了什麼，所以我刪除了這部分。爲了使圖片居中，我使用負邊距技巧，將其定位在頁面的50％處，因此在中間。然後我應用等於調整大小的圖片寬度的一半的負磁貼。

Answer 2

就用這個。

這裏是一個演示：http://jsfiddle.net/58MPb/3/

Answer 3

我相信我已經固定它：http://jsfiddle.net/jcolicchio/58MPb/4/

首先，我改變了對JS的第一行：

$(document).ready(function() { 

因爲它似乎沒有在所有運行代碼。你也有一個向後的不等號，翻轉太各地：

if ((theWindow.width()/theWindow.height()) > aspectRatio) { 

其他的解決方案張貼在這裏是非常乾淨的代碼，但那種緊張的我。