現在、このフィドルを使用して、固定位置を使用せずに、完全な高さの背景画像を維持するためにチェックする適切なプロパティを特定しようとしています:
問題に遭遇しましたが、それを確実に解決する方法がわかりません。画像タグのサイズを高さ 100% に変更すると、ブラウザの幅が画像の幅と高さの比率よりも広い場合、高さが小さいと画像の右側に隙間ができます。
高さを 100% に設定すると、表示スペースの 100% にサイズ変更されますが、下にスクロールすると、画像は垂直方向の領域全体を占有しません。
$(window).resize(function(){
// window and body are both incorrect for different reasons
bgImage.css({height:$(this).height()+'px'});
});
画像が常に使用可能なスペースの 100% を占めるようにするにはどうすればよいですか。
a) ページが画像よりも長い場合は、自動幅で垂直方向に引き伸ばします
b) ページは短く、ブラウザのビューポートは大きい場合は、コンテンツの下部を超えてビューポートに合わせて引き伸ばしますが、コンテンツを表示するのに十分なだけブラウザの高さを減らしてもスクロールバーは表示されません、サイズ変更された画像の新しい高さよりも小さい高さ。
高さを減らしたときにスクロールバーが作成されないようにし、ブラウザーの高さと幅を増やしたときにギャップが残らないようにするために、正しい高さに指を置くことができません。
注: PC 用 Safari では document.ready の使用に問題があり、ページの読み込み時に画像のサイズ変更を行う場合は、window.load を使用する方がうまく機能することがわかりました。document.ready は、Firefox で正常に動作します。