51

background-sizeこのプロパティを全幅と高さの背景画像に使用していますが、Nexus7 タブレットの Chrome を縦向き表示で完全にカバーするのに問題があります。高さではなく幅のみをカバーします。つまり、その200px下に約空白があります。ただし、デスクトップ Chrome (またはその他のもの) でサイトを表示し、垂直モニターで縦長のサイズをエミュレートしても問題はありません。

誰にも解決策がありますか？

CSS:

html { 
    background: url(/images/post_bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/post_bg.jpg', sizingMethod='scale')";
}

縦向きのスクリーンショット:

4

6 に答える 6

7

将来誰かがこれに遭遇した場合に備えて、私が見つけた解決策を提供します。背景画像を使用する代わりに、私は<img>：を使用しました

HTML：

<img id="full_bg" src="/images/post_bg.jpg" alt="Post your project on CustomMade">

CSS：

#full_bg {
    height: auto;
    left: 0;
    min-height: 100%;
    min-width: 1024px;
    position: fixed;
    top: 0;
    width: 100%;
}

@media screen and (max-width: 1024px) {
    #full_bg {
        left: 50%;
        margin-left: -512px;
    }
}

これは、クロスブラウザおよびモバイルデバイスで機能しました。私はここで解決策を見つけました。

于 2013-02-15T12:29:09.127 に答える
6

さて、私は別の解決策を考え出すことができます:私はそれを本体に追加しました。あなたが世話をする必要があるのは、 background-attachment:fixed が最後のルールであることだけです:

作品:

body {
        height:100%;
        width:100%;
        background-size:cover;
        background-repeat:no-repeat;
        background-position: center center;
        background-attachment:fixed;
}

動作しません:

body {
            height:100%;
            width:100%;
            background-size:cover;
            background-attachment:fixed;
            background-repeat:no-repeat;
            background-position: center center;
}

電話ブラウザが一般的に少しバグが多いのは本当に残念です...

于 2016-09-01T17:52:29.580 に答える
1

少しjqueryのものを使用して別の解決策を見つけました。この修正は、背景に横向きの寸法/比率の画像を使用しているという前提に基づいています。

step1: 「ウィンドウの高さ」と「ページコンテンツの高さ」を比較

step2: 「ウィンドウの高さ」が「ページコンテンツの高さ」未満の場合

step3: これをbodyタグに適用

HTML {

<body style="background-size: auto 'page content height'; background-attachment: scroll;">

}

脚本

var wHeight = $(window).height();
    var bodyHeight = $('page-content-element').height();
    if(wHeight < bodyHeight){
        $('body').attr('style', 'background-size: auto '+ (bodyHeight*1.1) +'px;background-attachment: scroll;');
    }
    else{
        $('body').removeAttr('style');
    }

ページの読み込みとウィンドウのサイズ変更でこれを呼び出します

于 2014-09-24T06:28:48.493 に答える