jquery背景100%填充屏幕，但会切断图像的一部分

我使用了下面的代码来填充页面的整个屏幕。我真正需要的是让它完全填满<强>高度>，不重要的是它没有完全填满宽度。我只需要背景图片集中在页面中间，页面高度为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>

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

});

$（窗口）.load（函数（）{
var theWindow=$（窗口），
$bg=$（“#bg”），
aspectRatio=$bg.width（）/$bg.height（）；
函数resizeBg（）{
如果（（theWindow.width（）/theWindow.height（））

顺便说一句，我不得不把空图像作为按钮，因为div上的某些原因不起作用。奇怪的事。当我向这个div添加border时，它开始工作，但操作仅限于border。。。这很奇怪。当然，我不想要一个边框，因为它看起来像是要单击的背景的一部分

jsFiddle here:>>jsFiddle只需使用以下命令：

var theWindow = $(window)

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

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

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

---

下面是一个演示：

出于某种原因，JSFIDLE无法工作，但下面是在测试页面上工作的结果代码：

<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>

身体{
身高：100%；
宽度：100%；
边距：0；填充：0；
溢出：隐藏；
}
#bg{位置：固定；顶部：0；左侧：50%；}
.bgwidth{width:100%；}
.bgheight{高度：100%；}
#cdj2000{
位置：固定；
最高：50%；
左：50%；
宽度：700px；
高度：500px；
左边距：-350px；
利润上限：-250px；
}
#车轮进入{
位置：固定；
最高：50%；
左：50%；
宽度：100px；
高度：100px；
利润上限：-50px；
左边距：-50px；
}
img{
边界：无；
}
$（窗口）.load（函数（）{
var theWindow=$（窗口），
$bg=$（“#bg”），
aspectRatio=$bg.width（）/$bg.height（）；
函数resizeBg（）{
$bg
.removeClass（）
.addClass（'bgheight'）.css（'margin-left'，$bg.width（）/2*-1）；
}
theWindow.resize（函数（）{
resizeBg（）；
});
resizeBg（）；
});

您无缘无故地在窗口的aspectRatio上进行测试。因为不管发生什么，你都想要100%的窗户高度，所以我去掉了这个部分。为了使图片居中，我使用了负边距技巧，将其定位在页面的50%，所以在中间。然后，我应用一个负片magin，其宽度等于调整后图片宽度的一半。

我相信我已经修复了它：

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

$(document).ready(function() {  

因为它看起来根本没有运行你的代码。你也有一个向后的不平等符号，也翻转过来：

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

---

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

请用代码做一个JSfiddle，人们会更容易帮助你。[link]我真正需要的是在图像大于屏幕大小时降低图像高度（当然要保持比例）。谢谢，谢谢。但不幸的是，如果窗口的高度大于图片的高度，它会上升并留下下面的空白，因此它实际上并没有覆盖屏幕的100%高度，如果你知道我的意思的话。但无论如何谢谢你的努力太好了，这就是我想要的。非常感谢。就快到了，只有一件事——它是左对齐的，但萨尔克特已经把它修好了。非常感谢您的帮助和时间。我也一定会写下来。谢谢

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