0

小提琴示例：http: //jsfiddle.net/wmnWc/5/

调整视口窗口的大小以查看我想要实现的目标。

正如您在我的代码中看到的那样，我已经将容器高度设置为最小高度值到表单容器的外部高度。这是因为我希望能够滚动到表单的自然高度，仍然保持背景图像可见。

我还需要图像始终保持其自然比例。正如你所看到的，这是我试图做的。

样品图片尺寸：

  • 宽度：2560 像素
  • 高度：1709 像素

代码：

$(window).bind("resize.browsersize", function () {

    var viewportHeight = $(window).height(),
        viewportWidth = $(window).width(),
        loginHeight = $('#login').outerHeight(),
        containerHeight = $('.background-photo').height(),
        containerWidth = $('.background-photo').width(),
        ratioHeight = 1,
        ratioWidth = 1.497;

    $(".background-photo").css({
        'width': viewportWidth + 'px',
        'height': viewportHeight + 'px',
        'min-height': loginHeight + 'px'
    });

    if (containerHeight > containerWidth) {

        $(".background-photo img").css({
            'height': containerHeight + 'px',
            'width': containerHeight * ratioWidth + 'px',
            'max-width': containerHeight * ratioWidth + 'px'
        });

    } else if (containerWidth > containerHeight) {

        $(".background-photo img").css({
            'width': containerWidth + 'px',
            'height': 'auto',
            'max-width': containerWidth + 'px'
        });

    }

}).trigger("resize.browsersize");


提前致谢。

乔什

4

3 回答 3

1

有什么理由不能使用background-size: cover吗？

html { 
    background: url('http://www.motocomdigital.co.uk/login-background.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

见：http: //jsfiddle.net/wmnWc/7/

工作于：

Safari 3+
Chrome Whatever+
IE 9+
Opera 10+ (Opera 9.5 supported background-size but not the keywords)
Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
于 2013-02-13T22:58:11.737 回答
1

为什么不保持简单？

.background-photo { position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; overflow:hidden; }
img { max-width:100%; /*min-width:600px;*/ }

$(document).ready(function(){
    var imgRatio;
    $("img").load(function(){
        var $i = $(this);
        imgRatio = $i.width()/$i.height();
        var $w = $(window);
        $w.on("resize",function(){
            $i.css("min-width",$w.height() * imgRatio);
        }).resize();
    });
});

http://jsfiddle.net/wmnWc/10/

于 2013-02-13T22:58:23.303 回答
0

此代码片段将帮助您：我设置了一个垂直填充浏览器窗口的最小高度，并设置了一个水平填充它的 100% 宽度。然后设置图像宽度的最小宽度，以便图像不会小于它的大小。这更容易并且没有js。

.background-photo img {
    min-height: 100%;
    min-width: xxxxpx;/* image width */

    /* Set up proportionate scaling */
    width: 100%;
    height: auto;

    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
}
于 2013-02-13T23:18:00.230 回答