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