在图片和客户端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%显示,图片同样居中,但是在客户端屏幕分辨率低的情况下,图片会受到挤压;
在屏幕分辨率高的情况下,图片会受到横向挤压;
两种方式各有利弊,须权衡后采用。