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

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

1 个答案: