1

次の要件を持つレイアウトがあります

  • 左側に画像、右側にコンテンツ。

  • 画像はビューポートの左下に固定されています

  • ユーザーがスクロールしても画像が動かない

  • 画像は、ビューポートの 100% の高さ、最大の高さまでサイズ変更されます。（実際よりも大きくしようとして画像が歪むことは望ましくありません）

  • 画像は縦横比を保持し、高さのサイズ変更に従って幅を変更します。

  • コンテンツは画像の右側から始まり、ブラウザーのビューポートに合わせて画像のサイズが変更されると移動します。

これで、これらの要件の最後のものを除いて、ほぼすべてを達成することができました。

ここを見てください：

http://letteringmusic.com/

画像は非常にうまくサイズ変更されますが、画像は位置が固定されているため、コンテンツを画像の横に浮かせることができず、ドキュメントフローから外れます。

それが私が望む結果を得る唯一の方法である場合、私はJavaScriptソリューションに反対していません。

これを機能させるために私が何をする必要があるか知っている人はいますか?

ありがとうございました！！

4

1 に答える 1

0

迅速な (そしておそらく唯一の) 解決策は、ブラウザー ウィンドウのサイズが変更されたときに (window.onresizeイベントを使用して) コンテンツのスタイルを変更することです。その関数では、背景画像の幅を読み取る必要があります。

var bgWidth = getElementById('background-img').style.width;
getElementById('content').style.left = bgWidth;

と使用します#content { position: absolute }。これにより別の問題が発生することはわかっていますが、回避できると思います。Javascript を有効にする必要がある (また、誰かがこのウィンドウのサイズを変更するとイベントが頻繁に発生する) ため、これは最も適切な解決策ではありませんが、機能するはずです。

于 2010-03-07T12:32:32.380 に答える