0

サイトの親コンテナ(全身ではない)で画像を垂直方向に引き伸ばそうとしています。これは、IDが「imagen-fondo」のdivです。

私はbackstretchプラグインと、background-sizeを使用したcssbackground-imageのいずれかを試しました。

ただし、どちらの場合も問題は、親コンテナの計算された高さが直接の子の高さよりも小さいため、背景画像がコンテンツ自体よりも小さく見えることです。

どうすれば彼の直接の子供と同じ高さ、または少なくともそれより大きくすることができますか?

ここでライブデモを見ることができます:

http://50.21.181.12:3001/plantillas/mba

スクリーンショットは、親divの高さを示しています

スクリーンショットは子divの高さを示しています

アップデート:

問題は、div#imagen-fondoがコンテンツではなくウィンドウの高さを取得していることだと思います。これが、画面が大きい場合は問題が発生しないが、ウィンドウの高さが発生するコンテンツよりも小さい場合は、背景画像が終了する垂直方向のスクロールを開始するのと同じように、この2つのスクリーンショットで確認できます。

ステップ1、一番上までスクロール step2、少しスクロールすると、背景が終了していることがわかります

オーバーフローのあるものはありますか?

更新2:

今のところ、私はそれを機能させるためにいくつかのJavaScriptを導入しました、

フッターのオフセット位置を取得し、「。backstretch」divの高さをその高さまでストレッチします。

ただし、ウィンドウのサイズを変更して垂直スクロールバーを表示し、ページを調べると、親コンテナ「#imagen-fondo」(バックストレッチが自動的に高さを取得する場所)が引き続き高さを取得していることがわかります。コンテンツ自体からではなく、表示されるビューポート。

誰かがそれを行うためのより良い方法を見つけた場合、CSSはこの汚いアプローチの代わりにそのアプローチのみを使用します。

4

2 に答える 2

0

clear:bothを使用して、親divのfloatをクリアします。または、親divでclearfixを使用します。

于 2012-11-14T17:04:50.940 に答える
-1

今のところ、私はそれを機能させるためにいくつかのJavaScriptを導入しました、

フッターの位置を読み取り、「。backstretch」divの高さをその高さまで伸ばします。

ただし、ウィンドウのサイズを変更して垂直スクロールバーを表示し、ページを調べると、親コンテナ「#imagen-fondo」(バックストレッチが自動的に高さを取得する場所)が引き続き高さを取得していることがわかります。コンテンツ自体からではなく、表示されるビューポート。

誰かがそれを行うためのより良い方法を見つけた場合、CSSはこの汚いアプローチの代わりにそのアプローチのみを使用します。

于 2012-11-15T21:38:00.310 に答える