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

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