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

V2EX = way to explore

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

For Existing Member Sign In

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

This topic created in 4506 days ago, the information mentioned may be changed or developed.

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 replies • 1970-01-01 08:00:00 +08:00

tension

Dec 29, 2013

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

然后 margin: 0 auto;

比较好

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

yimity

Dec 29, 2013

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

ray1980

Dec 29, 2013

你可以参考淘宝的做法，
#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

Dec 29, 2013

background-size: cover?

aisin

Dec 29, 2013

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

bzw875

Dec 29, 2013

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