即使在調整窗口大小時也保持背景圖像居中

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