窗口缩小时控制位置和高度

Question

我这里有一个奇怪的 CSS 情况。我正在构建具有响应性和视差的新作品集。如果你看这里，在第一部分你会看到一张桌子：http://daniellebrittanydesigns.com/new-portfolio/

桌子在不同的部分/分区中。桌子的主要部分（所有物品）是一个图像。桌子的桌子/木头部分是它下方 div 中的背景图像，因为我需要它伸展，yadda yadda。

木头部分设置为 200px 高（因为 div 没有内容），并放置在 top:-200px 上，因此桌子上的物品看起来像是“坐在”上面。

当您缩小窗户时，主桌图像会缩小，但桌子的木质部分会保持其高度并沿着图像上升，最终会覆盖窗户，等等。

我一直在研究高度、位置、边距等 - 找不到可以使 .desk-wood 与桌面主图像一起缩小并保持位置的解决方案。

任何 CSS 技巧都会有所帮助 - 非常感谢！

Answer 1

我在这里为您看到了两个选项。

首先开始使用百分比来处理木材的高度和位置。对于 RWD，元素具有流畅的结构很重要，并且设置静态宽度和高度对您的情况没有帮助。您也可以将相同的 % 镜像到固定位置。

您的另一个选择是使用媒体查询在页面宽度缩小或扩大时动态设置宽度。

哎呀，您可能会发现将这两个选项结合起来是您的喜好。