即使调整窗口大小，也保持背景图像居中

Question

我有一个容器 div，其中另一个 div 居中并带有背景图像。

当我调整浏览器窗口的大小时，我希望图像保持居中，即使浏览器窗口的宽度小于图像的宽度。

这里有一些代码：

CSS：

.wrap {
    width:100%;
    height:357px;
    background-color:red;
    overflow:hidden;
    text-align:center;
}
.image {
    margin:0 auto;
    background:url('http://4.bp.blogspot.com/-GKx0A_H8DGE/Tb9bTBCC5pI/AAAAAAAAANc/jvjcjvuNmGk/s1600/wide-angle-lens-3-1.jpg') no-repeat;
    width:500px;
    height:357px;
}

HTML：

<div class="wrap">
    <div class="image"></div>
</div>

您可以看到，当调整浏览器大小时，图像在到达屏幕左侧后会停止“居中”。我想要的是仍然看到图像的中心，左侧被剪掉并且基本上向左移动到屏幕外。仅使用 CSS 是否可行？如果不可能的话，我也会对 JS 解决方案感兴趣。

Answer 1

.wrap {
    height: 357px;
    background-color: red;
    overflow: hidden;
    position: relative;
}
.image {
    position: absolute;
    left: 50%;
    margin-left: -250px;
    background:url('/image.jpg') no-repeat;
    width:500px;
    height:357px;
}