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

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; 
}