相对于设置为position:fixed的流体宽度元素的位置内容
我有一个具有以下要求的布局
左侧有图像，右侧有内容。
图像固定在视口的左下角
用户滚动时图像不会移动
时，图像大小将调整为视口的 100% 高度，直至其最大高度。 （我不希望图像在尝试大于实际大小时扭曲）
图像保留其纵横比，并根据高度调整大小调整其宽度。
内容从图像右侧开始，并随着图像随浏览器视口调整大小而移动。
内容从图像右侧开始
现在，除了最后一个要求之外，我几乎已经实现了所有要求。
看看这里：
图像大小调整得很好，但我无法理解内容浮动在图像旁边，因为图像是位置：固定的，因此不在文档流中。
如果这是获得我想要的结果的唯一方法，我并不反对 JavaScript 解决方案。
有人知道我需要做什么才能使这项工作成功吗？
谢谢你！！
I have a layout with the following requirements
An image on the left side, and content on the right side.
The image is pinned to the bottom left of the viewport
The image does not move when the user scrolls
The image resizes to 100% height of the viewport, up to it's max height. (I don't want the image to distort in it's attempts to be larger than it actually is)
The image retains it's aspect ratio, and resizes it's width according to the height resizing.
The content begins to the right of the image, and moves as the image resizes with the browser viewport.
Now, I've managed to achieve pretty much all but the last of these requirements.
Have a look here:
The image resizes quite nicely, but I can't get the content to float next to the image because image is position:fixed, and therefore out of the document flow.
I'm not opposed to a javascript solution if that's the only way to get the result I want.
Anybody know what I need to do to make this work?
Thank you!!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
一个快速（也许是唯一）的解决方案是在浏览器窗口调整大小时重新调整内容的样式（使用
window.onresize事件）。在该函数中，您应该读取背景图像的宽度：并使用#content {position:absolute}。我知道这会带来另一个问题，但我认为你可以绕过它们。这不是最简洁的解决方案，因为必须启用 JavaScript（当有人调整此窗口大小时，该事件将被多次触发），但它应该可以工作。
A quick (and perhaps only) solution is to restyle the content when the browser window resizes (using the
window.onresizeevent). In that function you should read the width of the background image:and use
#content { position: absolute }. I know this introduces another problems, but I think you can bypass them. It's not the most neat solution, as Javascript must be enabled (and the event will be fired a lot when someone resizes this window), but it should work.