background-size：Androidタブレットで肖像画でカバーが機能しない

フルサイズと高さの背景画像にはbackground-sizeプロパティを使用していますが、Nexus7タブレットの縦書きビューでChromeで完全に覆われません。高さではなく幅のみをカバーする。すなわち、その下に約200pxの空白がある。しかし、私が机上のChrome（または他のもの）や鉛直モニタで肖像画の寸法をエミュレートするためにサイトを見ると、問題はありません。background-size：Androidタブレットで肖像画でカバーが機能しない

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

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')"; 
}

肖像スクリーンショット：

出典

2013-02-14 maceyj2

私は誰かが、将来的にこのに走る場合で見つかったソリューションを提供します。代わりに背景画像を使用して、私は<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; 
    } 
}

これはクロスブラウザやモバイルデバイス上で働きました。私は解決策を見つけたhere。

出典

2013-02-15 12:29:09 maceyj2

は、私はあなたがそうのように、CSSでhtmlと体タグの高さを定義することによって、それを修正することができると信じて：

html{ 
height:100%; 
min-height:100%; 
} 
body{ 
min-height:100%; 
}

希望この私はそれがあるため、長い時間をされている知っている

出典

2013-10-18 14:47:04 ackushiw

注意。 – Rufflewind

同じです。ちょうどhtml要素のためだけに.... – MarcoZen

を支援質問は尋ねられましたが、私は答えを見つけました。私のためにbackground-size：カバーはAndroidのブラウザとAndroidのChromeで動作し、バックグラウンドのCSS命令で "fixed"を省略すると動作します。、

#yourDivSelectorHere { 
width: 100%; 
height: 100%; 
position: fixed; 
top: 0; 
left: 0; 
z-index: 0; 
background-image: url(/img/backgrounds/1.jpg) ; 
background-repeat:no-repeat; 
background-position: center center; 
/* background-attachment: fixed; removed for Android */ 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;

}（背景画像とは対照的に）DIV自体が所定の位置に固定されている

100％の幅である：は、いくつかのテストの後、それが画像にDIVの背景を作る私の作品そして高さは、すべての背中に置かれています。 HTMLやBODYにバックグラウンドイメージを追加するのではなく、少し余計な努力をしていますが、これまでテストしたすべてのブラウザ（FF、Chrome、IE8、IE9、Safari）、iPad2とAndroid Chromeアンドロイドブラウザ。

出典

2013-10-25 16:02:07

素晴らしいタイミング！これは私のために働いて、受け入れられた回答IMOでなければなりません！ – Raj

事は、バックグラウンドサイズでカバー以上のことができます、そして、それは動作しません。 –

私はビット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-24 06:28:48

page-content-elementとpage contentの高さについてもっと説明できますか？私。完全な例を表示できますか？ –

-3

に、このソリューションのサイズを変更するまあ、私は別の解決策を考え出すことができるアンドロイド

html{ 
height:100%; 
min-height:100%; 
} 
body{ 
min-height:100%; 
}

出典

2015-03-19 15:28:03

その回答は既に存在するものの正確なコピーにすぎません。 – luschn

のためにも私のために働きました。私は体にそれを追加し、あなたはの世話をするために必要なすべてのことを背景アタッチメント、次のとおりです。固定は、最後のルールです：

作品：

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

それは代わりに... phonebrowsersは、一般的には、少しバギーであることを、本当に

出典

2016-09-01 17:52:29 BastianBalthasarBux

くそー！私はこれを永遠に探しました。あなたは固定が必要な理由を知っていますか？私はこれを永久に点検した。 – Tallboy

いいえ、私はこれがなぜか分からない。私はそれが単にバグだと思う、それは私にとって技術的に意味がない最後のルールである場合にのみ動作します... – BastianBalthasarBux

使用HTMLの背景ピティーです体の「高さ：100％」を与える

html { 
 
    height:100%; 
 
    background: url(bg.jpg) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
}

私の場合、私は `height`または` html`と他には何の `分-height`のいずれかが必要であること

出典

2017-04-20 18:44:47

background-size：Androidタブレットで肖像画でカバーが機能しない

答えて

関連する問題