iPad画面に合わせて背景画像のサイズを変更するには

Question

問題が発生しました。私は自分のウェブサイトをコンピュータと電話で見ると完全に構築されています。しかし、私がiPad上でそれをプルすると、背景画像は爆破されたようです。私のウェブサイトはhttp://www.zwdalpha.com/です、どんな助けも非常に高く評価されるでしょう！また、私のGithubはhttps://github.com/zcsmouse970/zwdalpha

Answer 1

です。あなたの問題は、バックグラウンドの添付ファイルと関係しているように見えます。

すると、この問題に対処するためにbackground-attachment: scroll

Answer 2

を試してみてください、あなたは最初に何が起こっているかを理解する必要があります。背景画像のサイズは、background-size属性で処理されます。属性は現在coverに設定されています。 coverは、イメージが要素の高さを「覆う」ようにするため、大きなスクリーンに最適です。これにより、側面を上から下に塗りつぶすように両面を切り抜くことができます。 containはその逆です。それはあなたが常に画像全体を見ることができるようにします。これは、幅が100％であり、高さがクリップまたは拡大されていることを確認することによって行います。タブレットなどで画像が壊れていることがわかると、CSSはコンテンツ領域全体が画像で満たされていることを確認しています。画像の高さがコンテンツペインに満ちていることを確認することでCSSはこれを行います。ここでもう少し詳しく説明します。

あなたの画像はfixedです。明らかに、これはあなたが行っていた効果でしたが、ここで何が起こる必要があるか考えることができます。今度は、コンテンツペインがどこにでも表示できるので、画像は上から下に画面をカバーする必要がありますが、fixedです。これであなたの画像はビューポート全体をカバーしています。 background-attachment:scroll;に変更したときの変更を確認できます。代わりに、イメージをビューポートではなく内容ペインに収めます。

これを変更できる方法は、メディアのクエリを実装して、表示サイズに適したクロップされたバージョンに背景を切り替えることです。