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

2013-12-29 11:12:30 +08:00
 bzw875
1920px,561px的轮播焦点图,无法居中
HTML
————
<div id="sides"><img src="images/Banner.jpg" /></div>

CSS
————
#sides {
width:100%;
height:561px;
overflow:hidden;
text-align:center;
}
5028 次点击
所在节点    CSS
6 条回复
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,解决了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/94925

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX