产品使用及交流论坛

注册

 

QQ登录

只需一步,快速开始

发新话题 回复该主题

求帮助:关于首页banner全屏幻灯 改变电脑分辨率 图片不自适应变... [复制链接]

1#
/*banner全屏幻灯*/
#banner_slide{width:100%;position:relative;height:z;z-index:2;overflow:hidden;}
#banner_slide .panel{position:absolute;clear:both;z-index:3;left:50%;bottom:20px}
#banner_slide .panel span{display:block;float:left;width:12px;height:12px;border-radius:6px;background-color999;margin-rightpx;cursor:pointer;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity:0.5;}
#banner_slide .panel span.current{background-color333;}

#banner_slide_inner{width:100%;height:366px;margin:0px auto;position:relative;left:0px;top:0px;overflow:hidden}
#banner_slide_inner li{position:absolute;width:100%;height:366px;z-index:1;left:0px;top:0px;background-repeat:no-repeat;background-position:center top;}
#banner_slide_inner li.zy_move{position:static;float:left;width:1440px;} /*左右滚动css*/
#banner_slide_inner li.sx_move{position:static;} /*上下滚动css*/
#banner_slide_inner li.current{z-index:2;}
#banner_slide_inner li a{display:block;width:100%;height:100%}


上面是幻灯的CSS   下面是后台首页栏目的调用

<div id="banner_slide">
<ul id="banner_slide_inner">
<li style="background-image:url(/e/images/banner/b_1.jpg)" class="current"/><a href=#></a></li>
<li style="background-image:url(/e/images/banner/b_2.jpg)"><a href=#1></a></li>
<li style="background-image:url(/e/images/banner/b_3.jpg)"><a href=#2></a></li>
<li style="background-image:url(/e/images/banner/b_4.jpg)"><a href=#3></a></li>
</ul>
</div>


系统是V3的宽屏版  这样在不同分辨率下 图片显示的不完全 要么2边有空白 要么2边显示不完全 求帮助解决下 谢谢!
分享 转发
TOP
2#

鱼和熊掌往往不可能兼得。图片完全自适应也是不可能的,为了两边没有白边,图片宽度必须做得足够宽,一般要做到1920px以上,但是图片不管有多宽,其核心显示区域还是在1000px左右,这样就不会导致内容显示不全了。也就是说,除了中间1000px外,两边的图案都是陪衬,在低分辨率下可以不显示。
TOP
3#

顶,做成1920的,主要东西放在中间1400左右。
TOP
发新话题 回复该主题