我有一个符合以下要求的布局
左侧是图像，右侧是内容。
图像固定在视口的左下角
用户滚动时图像不会移动
图像调整为视口的100％高度，直至其最大高度。 （我不希望图像扭曲，试图比实际更大）
图像保留其纵横比，并根据高度调整大小调整其宽度。
内容从图像的右侧开始，随着图像使用浏览器视口调整大小而移动。
现在，除了最后一项要求之外，我已经成功实现了所有这些要求。
看看这里：
图像调整得非常好，但我无法将内容浮动到图像旁边，因为图像位置是固定的，因此不在文档流中。
我不反对javascript解决方案，如果这是获得我想要的结果的唯一方法。
有人知道我需要做些什么才能使这项工作？
谢谢！
答案 0 :(得分：0)
快速（也许是唯一的）解决方案是在浏览器窗口调整大小时（使用window.onresize事件）重新设置内容。在该函数中，您应该读取背景图像的宽度：
var bgWidth = getElementById('background-img').style.width;
getElementById('content').style.left = bgWidth;
并使用#content { position: absolute }。我知道这引入了另一个问题，但我认为你可以绕过它们。这不是最巧妙的解决方案，因为必须启用Javascript（当有人调整此窗口时，事件将被激活很多），但它应该可以工作。