高级CSS布局|固定列，带有超大图片

好吧，今晚我的大脑可能不工作了。我试图实现的是两列布局，其中一列滚动，另一列固定。固定列中有一个非常大的背景图像，我希望能够缩放到屏幕的大小。此外，左固定列的宽度必须缩放以适应背景图像。要真正解释这一点，最好的方法是用图片：

---

带箭头的突出显示区域将滚动，另一个包含图片和twitter状态的列将保持不变。我的问题并没有在固定CSS定位中发挥作用。我的问题是根据屏幕大小缩放我的列，以便图片始终保持在这里显示的比例，无论是在它自己的维度还是其他列的维度。这就是我一直坚持的。有什么想法吗？非常感谢您的帮助。

我认为您可以在第一列中使用图像元素，并将其设置为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>

---

检查您的JS FIDDLE代码：

---

因为你没有提到你会改变背景中的图像，所以我在body标签中提供了背景图像

旁注：我们可以在垂直方向上进行缩放，或者将父对象的溢出设置为隐藏，从而进行一些欺骗。我们把图像放大了，因为有棵树被砍掉了。当我们的列缩放时，我们可以看到更多的图像。可能需要一些创造性的裁剪和在宽度或高度上使用min:值才能正确。