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");
});

顺便说一句。我不得不将空图像作为按钮，因为某些原因div无法工作。奇怪的事情。当我向这个div添加border时，它开始工作了，但操作只在border上。。。这很奇怪。当然，我不想要一个边界，因为它看起来像是要点击的背景的一部分。

jsFiddle此处：>>jsFiddle<lt；

谢谢你的任何想法。

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%，所以在中间。然后我应用一个等于调整大小的图片宽度一半的负magin。

Answer 2

只需使用此：

var theWindow = $(window)
function resizeBg() {
$("#bg").css('width', $('html').outerWidth());
$("#bg").css('height', $('html').outerHeight());
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");

如果要保持纵横比，请删除更改宽度的线。

以下是一个演示：http://jsfiddle.net/58MPb/3/

Answer 3

我相信我已经修复了它：http://jsfiddle.net/jcolicchio/58MPb/4/

首先，我将JS的第一行改为：

$(document).ready(function() {  

因为它似乎根本没有运行您的代码。你也有一个向后的不平等标志，也把它反过来了：

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

这里发布的另一个解决方案是更干净的代码，但对我来说有点紧张