网页专题的banner图片布局设计

在图片和客户端pc不匹配的情况下，如何进行图片设置，使得达到我们预期的效果？

 

第一种：

<div style="background-color:#fcf7f8;height:684px">
 <div class="consultImg1" style="background-image:url('images/banner-all.jpg');background-repeat:no-repeat; background-position:top center; height:685px;">
        <a href="javascript:void(0)" οnclick="swtClick()"></a>
 </div>
</div>

设置 图片居中，上对齐，这样在图片尺寸较大的情况下，总是保证图片是在最中间的。

 

第二种：

.banner_z{ text-align:center; background-repeat:no-repeat; background-attachment:fixed; overflow:hidden; }

 

<div class="banner_z">
 <img src="images/banner01.jpg" alt="banner01" height="200" style="width:100%">
 <img src="images/banner02.jpg" alt="banner02" height="200" style="width:100%">
    <img src="images/banner03.jpg" alt="banner03" height="286" style="width:100%" border="0" usemap="#Map">
    <map name="Map" id="Map">
      <area shape="rect" coords="864,62,1173,154" href="javascript:void(0)" οnclick="swtClick()"  target="_blank" />
    </map>
</div>

设置图片100%显示，图片同样居中，但是在客户端屏幕分辨率低的情况下，图片会受到挤压；

在屏幕分辨率高的情况下，图片会受到横向挤压；

 

两种方式各有利弊，须权衡后采用。