検査と実際のモバイルで異なる背景イメージ

モバイルビューで正しく位置付けるために背景イメージを取得しようとしています。私が検査してウェブサイトを見ているとき（またはモバイルビューであるようにモニターのサイズを変更したとき）、画像はうまく表示されます。しかし、私はそれを電話で見ると、画像は何らかの理由で電話の幅に合わせてサイズ変更されているようです。検査と実際のモバイルで異なる背景イメージ

#hero{ 
 
    height: 100vh; 
 
    max-width: 100%; 
 
    background-image: url('http://i.imgur.com/molLHMj.jpg'); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
}

<body> 
 
    <div id='hero'> 
 
    </div> 
 
</body>

私の記憶が正しければ、画像は画面幅よりも大きい場合、それは単に隠されただろうように、カバーとしてバックグラウンドの大きさを設定することになるだろう、これは何らかの理由でサイズ変更されているようです。

編集：

はそれがChromeのインスペクタでどのように見えるかのような画像を表示するautoに背景のサイズを設定します。幅の広いバージョンでは全幅/高さが表示されるため（自動であるため）、これは当てはまりません。私は何が起こっているのか本当に失われています。

EDIT2

のみクロムモバイル版はそのように表示するように見えます。デフォルトのブラウザは、デスクトップインスペクタのように背景をレンダリングします。本当に変だ。

出典

2017-08-11 Iruss

問題は、画像の大きさであるように思われました。幅は約3000であった。 1900年頃にサイズを変更すると、その動作は正常に戻りました。

出典

2017-08-12 16:02:44 Iruss

あなたはheight: 100vh;でそれを言っているので、画像がリサイズされます。また、widthに制限を設定しているため、画像に歪みが発生しています：max-width: 100%;。

ちょうどmax-width: 100%;を設定して（そしてheight:100vhを削除する）、または両方の行を削除してbackground-size:coverと貼り付けるだけでこれを解決できます。

しかし、背景が表示領域全体を覆うようにしたい場合は、背景をdivに置かないでください。実際にはdivを取り除き、背景をbodyに適用するだけです。

また、background-size:coverはイメージを非表示にしません。これにより、使用可能な背景をカバーするようにイメージのサイズが変更されます。この結果、背景のサイズが画像よりも小さい場合にクロッピングが発生します。 MDNから

：

カバー

含まの逆数であるキーワード。可能な限り画像を拡大/縮小し、画像の縦横比を維持します（画像はになりません）。イメージは、コンテナの幅または高さ全体を「カバー」します。画像とコンテナの寸法が異なる場合、画像は左右または上/下のいずれかにクリップされます。

出典

2017-08-11 19:41:03

私はdivを携帯用のサイズ変更を防ぎながら表示画面全体を覆うようにしたいのですが、それはどうですか？私は100vhになるようにその高さを特に設定することなく、どうやってやるのかについてはあまりよく分かりません。前もって感謝します！ – Iruss

@Iruss背景が表示領域全体を覆うようにするには、背景を 'div'に置かないでください。実際には、 'div'を取り除き、' body'に背景を適用するだけです。 –

私はフルサイズの背景画像で画面全体を埋める複数のdivを取得しようとしていました。私はそうする他の方法がないと推測していますか？ – Iruss

あなたはこのようなあなたの目標を達成することができます

.hero { 
 
height:100vh; 
 
width:100%; 
 
} 
 

 
.hero:nth-child(1) { 
 
background-image:url('http://placehold.it/1920x1080'); 
 
background-size:cover; 
 
} 
 
    
 
.hero:nth-child(2) { 
 
background-image:url('http://i.imgur.com/molLHMj.jpg'); 
 
background-size:cover; 
 
}

<div class="hero"></div> 
 
<div class="hero"></div>

出典

2017-08-11 20:28:22 scramlo

これは、携帯端末で見た場合、同じサイズの背景画像を表示するようです。 – Iruss

更新された回答を参照してください。どのように動作していないのかわからない場合はお詫び申し上げます。モバイルで何をしているのか教えてください。 – scramlo

同じイメージが上記の質問に表示されているようです。画像が切り取られるのではなく、モバイルの幅にリサイズされています。 – Iruss

検査と実際のモバイルで異なる背景イメージ

答えて

関連する問題