我有一个容器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解决方案感兴趣.
解决方法
.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; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。