0

フィドルの例: http://jsfiddle.net/wmnWc/5/

ビューポート ウィンドウのサイズを調整して、何を達成しようとしているのかを確認します。

私のコードでわかるように、フォーム コンテナーの外側の高さまでの min-height 値を使用して、コンテナーの高さを設定しました。これは、背景画像を表示したまま、フォームの自然な高さまでスクロールできるようにしたいためです。

また、画像が常に自然な比率を維持する必要もあります。ご覧のとおり、これが私がやろうとしたことです。

サンプル写真の寸法:

  • 幅: 2560px
  • 高さ: 1709px

コード:

$(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 に答える