我有一个容器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解决方案感兴趣。
答案 0 :(得分:6)
.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;
}