html - 歪むことなくモバイルブラウザで機能するように、大きな中央の背景画像を取得しようとしています

Question

だから私はこの記事の方法を使用しました: http://css-tricks.com/perfect-full-page-background-image/

ここに私が持っているコードがあります:

CSS:

#bg {
height: auto;
left: 0;
min-height: 100%;
min-width: 1024px;
position: fixed;
top: 0;
z-index: -1;
width: 100%;
}

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

html:

<img id="bg" src="breakfast.jpg">

これは、モバイル ブラウザの高さと幅の比率が台無しになることを除いて、ほとんどの場合機能します。

Answer 1

次のようにメディア クエリを編集します。

@media only screen and (max-width : 1024px) {

#bg {
    left: 50%;
    margin-left: -512px;
    min-height: 1px;
    height: auto;
}

}

Answer 2

私自身の質問に答えるつもりです。正しい縦横比を維持しながら背景画像がモバイル ブラウザーのページ全体に表示されるようにするには、縦向き/横向きモード用にサイズ変更された画像を含むメディア クエリを追加する必要があります。

Answer 3

修正を考え出した：

追加が必要

html {
    height: 100%;
}