1

我已经使用下面的代码来填充页面的整个屏幕。我真正需要的是让它完全填满高度，没关系它没有完全填满宽度。我只需要让背景图片居中在页面中间，页面高度为 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 添加边框时，它开始工作，但动作只在边框上......这很奇怪。当然我不想要一个边框，因为它假设它看起来是要点击的背景的一部分。

jsFiddle在这里：>> jsFiddle <<

谢谢你的任何想法。

4

3 回答 3

1

只需使用这个：

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/

于 2012-11-23T10:39:45.967 回答
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% 处，所以在中间。然后我应用一个等于调整大小图片宽度一半的负边距。

于 2012-11-23T10:40:30.693 回答
0

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

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

$(document).ready(function() {

因为它似乎根本没有运行您的代码。您还有一个反向不等号，也将其翻转过来：

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

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

于 2012-11-23T10:42:14.220 回答