宽度超屏幕宽的1920的大图怎么居中？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 4017 天前的主题，其中的信息可能已经有所发展或是发生改变。

1920px,561px的轮播焦点图，无法居中
HTML
————
<div id="sides"><img src="images/Banner.jpg" /></div>

CSS
————
#sides {
width:100%;
height:561px;
overflow:hidden;
text-align:center;
}

sides

div

561px

6 条回复 • 1970-01-01 08:00:00 +08:00

tension

2013-12-29 11:20:30 +08:00

最好先给 #sides 设置固定宽度

然后 margin: 0 auto;

比较好

还有一般轮播不都是背景图么?

yimity

2013-12-29 13:58:08 +08:00

这个一般貌似是不行的，设背景图吧，center top 就可以了。

ray1980

2013-12-29 14:31:43 +08:00

你可以参考淘宝的做法，
#slider { width:100%; height:100%; overflow:hidden;}
#slider-frame { position:relative; width:980px; height:640px; margin:0 auto;}
#slider-wrapper { position:absolute; left:50%; width:1920px;}
#slider-list { position:absolute; left:-50%; width:1920px;}

zenozeng

2013-12-29 19:23:44 +08:00

background-size: cover?

aisin

2013-12-29 20:36:47 +08:00

把图片放到background里, 这样更方便, 更好设置

bzw875

2013-12-29 20:52:13 +08:00

@ray1980 谢了，但是不懂得用。
下载了个全屏Jquery的焦点图js,解决了