css - 高度なCSSレイアウト| 非常に大きな画像のある固定列

Question

さて、私の脳はおそらく今夜は機能していません。私が達成しようとしているのは、1つの列がスクロールし、もう1つの列が固定されている2列のレイアウトです。固定列には非常に大きな背景画像が含まれているため、画面のサイズに合わせて拡大縮小したいと思います。さらに、左側の（固定された）列の幅は、背景画像に合わせて拡大縮小する必要があります。これを実際に説明する最良の方法は、写真を使用することです。 矢印が表示されている強調表示された領域はスクロールし、画像とTwitterのステータスが表示されている他の列は固定されたままになります。私の問題は、固定されたCSSの位置付けでは発生しません。私の問題は、画面サイズに基づいて列を拡大縮小することです。これにより、画像は、それ自体の寸法と他の列の寸法の両方で、ここに表示されている比率のままになります。それは私が立ち往生しているものです。何か案は？私は本当に助けに感謝します。

Answer 1

最初の列で画像要素を使用して、その親の100％を取得するように設定できると思います。親divもパーセンテージの場合、そのサイズはもちろん変更され、その中で画像が拡大縮小されます。画像を拡大縮小する場合、高さも指定できません。

<div id="parent" style="width: 40%">
  <img id="child" style="width: 100%" src="http://i.stack.imgur.com/lvvrv.png" alt="Fake Background" />
</div>

Answer 2

ここでJSFIDDLEコードを確認してください：http：//jsfiddle.net/4P9fJ/7/

背景の画像を変更することに言及していないので、bodyタグで背景画像を提供しました。