携帯電話のCss固定カバーの背景が拡大されている

私はこの問題をしばらく検索していましたが、実際の解決策が見つからないため、私は尋ねることにしました。私は自分のサイトにいくつかの再現性を実装しようとしています。私はgoogle chromeのinspect要素ツールを使用していますが、背景が正しく表示されています。スクロールアタッチメントを挿入しようとしましたが、動作しません。携帯電話のCss固定カバーの背景が拡大されている

これは背景に関する部分です。

.background2p{ 
 
\t background: url('background2.jpg') fixed no-repeat center center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
\t <link href="Risorse/css.css" rel="stylesheet" type="text/css"> 
 
\t </head> 
 
\t 
 
\t <body class="background2p"> 
 
\t </body> 
 
</html>

出典

2017-03-24 Chaos

です。使用しようとしている画像がデスクトップの比率（16：9/16:10）（これを読んで、モバイルでの比率を得るにはhttp://stackoverflow.com/questions/7199492/what-are-the-aspect-ratios-for-all-android-phone-and-tablet-devices）。別のイメージをモバイルデバイスの背景として取得し、その比率を9:16程度にカットします。メディアのクエリは、モバイルデバイスのサイズがあるまで画像をロードしないので、ファイルの最適化について心配する必要はありません。 –

これが原因 背景サイズのズームされていますカバーと 背景画像の幅と高さの比が要素の寸法に合わない

携帯電話の別の背景画像を携帯電話の画面に合わせて使用することもできます（デスクトップブラウザのレスポンスビューを参照））または使用することがありますbackground-size：contains;。後者の場合、バックグラウンドで空白が表示されることがありますが、画像を完全に表示するには

出典

2017-03-24 12:02:18

携帯電話のCss固定カバーの背景が拡大されている

答えて

関連する問題