将图像尺寸缩小到左侧

Question

我试图仅使用CSS或CSS3来实现以下效果：

图中的箭头表示图片。当浏览器调整大小时，我希望图片向左移动而不触摸文本，图片不会调整大小。因此，基本上在这种情况下，随着浏览器调整大小，箭头变短，因此图像的其余部分仍然只是隐藏，以便当我再次最大化窗口时它可以返回。这只能用CSS或CSS3吗？

[-------------------]
[                   ]
[ text -----------> ]  <--- Web Page
[                   ]
[                   ]
[                   ]
[                   ]
[-------------------]

[---------------]
[               ]
[ text -------> ]  <--- Web Page
[               ]
[               ]
[               ]
[               ]
[---------------]

Answer 1

这是我能做的最好的事情： http://jsfiddle.net/rmadhuram/czpnyn2x/

我可以通过定位背景图像让图片向左移动，但副作用是必须修正右列的高度。

.image {
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/4/46/The_2010_Perseids_over_the_VLT.jpg/1920px-The_2010_Perseids_over_the_VLT.jpg');
    background-position: right top;
    height: 1280px;
}

Answer 2

我相信position: fixed可能就是您所寻找的（jsfiddle）。