問題タブ [background-size]

フルスクリーンの画像ギャラリーを表示するために、組み込みの遅延読み込み機能を備えた slick.js カルーセルを使用しています。私が抱えている 1 つの問題は、レイジー ローダーは img タグを使用してのみ表示されるため、background-size:cover を適用できず、js プラグインを使用してフルスクリーンにすることでやり過ぎたくないことです。誰にもアイデアはありますか？

を使用すると、必要な動作が得られますが、Chrome ブラウザーを試してみると、画像が隅に押し込まれ、ブラウザー ウィンドウ幅の約 20% しか表示されbackground-size: 100%;ない理由がわかりません。background-size: contain;Firefox も同様です。

www.moonwards.com

なぜそれが起こっているのですか？CanIuseは、これらのブラウザで問題が発生することはないと述べています。

ページの本文に、垂直方向と水平方向の中央に配置され、キャンバスを覆う背景画像があります。

Chrome/Firefox およびすべてのモバイル ブラウザーでは、画像は垂直方向と水平方向の両方で中央に配置され、キャンバスを覆います。デスクトップの Safari では、画像は垂直方向の中央より少し下にあります。私は何か間違ったことをしていますか、それともブラウザのバグでしょうか?

これのライブ URL は次のとおりです: http://moonios.com

ページの他のコンテンツを削除するだけでなく、overflow: none を削除しようとしましたが、問題は解決しません。

何かアドバイスがあれば、またはこのバグを確認できる場合は、よろしくお願いします。ありがとうございました！チャーリー

更新：これを理解するためにもう少し作業を行いました。グリッドを使用してこの新しいページを作成しました: http://whyamicrazytoday.com/safari/

ページ全体の内容は次のとおりです。

まだSafariでのみ再現します。

次に、Safari のナビゲーション バーの半透明効果を思い出しました (オフにしてありますが)。ページのコンテンツがそのように考慮されないため、Safari は上部のナビゲーション バーを覆うようにボディ領域を考慮していると思います。dom からその効果を無効にする方法はありますか?

私は次の問題を抱えています: 私のウェブサイトの 1 つにレスポンシブな全画面画像スライダーがあります。画像サイズは常にウィンドウ サイズに適応します。私の解決策は次のとおりです。

問題は、ページの読み込み時にスライダーの位置でページの他のコンテンツが表示されることです。これは、ページの読み込み時に画像コンテナーに幅がないためです。幅は、画像の幅に基づいて計算されます。理解を深めるために: ページを読み込んでいると、少しの間、上部に div コンテンツが表示され、スライダーが読み込まれ、コンテンツが本来あるべきスライダーの下にあります。

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

前もって感謝します！

コード：

ボタンをクリックしたときに Google マップの iframe が画面全体をカバーしていない理由がわかりません。iframe を background-size: cover; に設定しました。ボタンをクリックすると、画面全体を覆うことができます。誰かがこれで私を助けることができますか? ありがとう。

次の CSS スタイルを使用すると、画像は div を完全にカバーしますが、その比率は維持されます。

問題は、PHP を使用して画像 URL を生成する必要があるため、CSS プロパティで指定できないことです。

私は jQuery、JavaScript、またはインライン CSS を使用しないことを好みます。私が求めているコードは次のようになります。

PHP

CSS

背景画像 (1280 x 853) を設定しましたが、画面にうまく合いません。

どうすれば修正できますか？