高级 CSS 布局 |带非常大图片的固定列答案

【问题标题】：Advanced CSS Layout | Fixed Column w/ Very Large Picture高级 CSS 布局 |带非常大图片的固定列
【发布时间】：2011-04-23 19:02:08
【问题描述】：

好的，所以今晚我的大脑可能无法正常工作。我要完成的是两列布局，其中一列滚动，另一列固定。固定列中有一个非常大的背景图像，我希望能够缩放到屏幕的大小。此外，左侧（固定）列的宽度必须缩放以适应背景图像。真正解释这一点的最好方法是用一张图片：带有箭头的突出显示区域将滚动，其中包含图片和推特状态的另一列将保持固定。我的问题与固定的 CSS 定位无关。我的问题是根据屏幕尺寸缩放我的列，以便图片始终保持在它自己的尺寸和其他列的尺寸中显示的比例。这就是我所坚持的。有任何想法吗？非常感谢您的帮助。

【问题讨论】：

标签： css scroll positioning image-scaling css-position

【解决方案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>

【讨论】：

旁注：我们可以通过垂直缩放或反之亦然并将父级的溢出设置为隐藏来作弊。我们使图像更大，就像那棵被裁剪的树一样。当我们的列缩放时，我们会看到更多的图像。可能需要一些创造性的裁剪和使用 min: 宽度或高度的值才能正确。

【解决方案2】：

在此处检查您的 JS FIDDLE 代码：http://jsfiddle.net/4P9fJ/7/

由于您没有提及您将更改背景中的图像，因此我在 body 标记中提供了背景图像。

【讨论】：